diff --git a/.changeset/cuddly-hats-attack.md b/.changeset/cuddly-hats-attack.md
new file mode 100644
index 0000000000..378196fa23
--- /dev/null
+++ b/.changeset/cuddly-hats-attack.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Update colors to use Primitive v8 CSS vars
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 362c19f392..31ccd97d6d 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,5 +1,6 @@
 {
   "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+  "plugins": ["@primer/stylelint-config/plugins/no-deprecated-colors"],
   "ignoreFiles": ["app/**/*.css", "**/*.js", "**/*.ts"],
   "rules": {
     "custom-property-pattern": null,
@@ -14,6 +15,7 @@
       {
         "ignoreAtRules": ["mixin", "define-mixin"]
       }
-    ]
+    ],
+    "primer/no-deprecated-colors": true
   }
 }
diff --git a/app/components/primer/alpha/action_list.pcss b/app/components/primer/alpha/action_list.pcss
index b0d162edd0..935a4efa22 100644
--- a/app/components/primer/alpha/action_list.pcss
+++ b/app/components/primer/alpha/action_list.pcss
@@ -28,7 +28,7 @@
     width: 100%;
     height: 1px;
     content: '';
-    background: var(--color-action-list-item-inline-divider);
+    background: var(--borderColor-muted);
   }
 
   /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
@@ -40,7 +40,7 @@
       width: 100%;
       height: var(--borderWidth-thin);
       content: '';
-      background: var(--color-action-list-item-inline-divider);
+      background: var(--borderColor-muted);
     }
 
     /* unset the default label pseudo */
@@ -75,7 +75,7 @@
 .ActionListItem {
   position: relative;
   list-style: none;
-  background-color: transparent;
+  background-color: var(--control-transparent-bgColor-rest);
   border-radius: var(--borderRadius-medium);
 
   /* state */
@@ -113,12 +113,12 @@
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
+          background-color: var(--control-transparent-bgColor-hover);
         }
       }
 
       &:active {
-        background-color: var(--color-action-list-item-default-active-bg);
+        background-color: var(--control-transparent-bgColor-active);
       }
     }
   }
@@ -130,25 +130,25 @@
     @media (hover: hover) {
       &:hover {
         cursor: pointer;
-        background-color: var(--color-action-list-item-default-hover-bg);
+        background-color: var(--control-transparent-bgColor-hover);
 
         &:not(.ActionListItem--navActive, :focus-visible) {
           /* Support for "Windows high contrast mode" */
           outline: solid var(--borderWidth-thin) transparent;
           outline-offset: calc(-1 * var(--borderWidth-thin));
-          box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
+          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
         }
       }
     }
 
     &:active {
-      background: var(--color-action-list-item-default-active-bg);
+      background: var(--control-transparent-bgColor-active);
 
       &:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
         outline: solid var(--borderWidth-thin) transparent;
         outline-offset: calc(-1 * var(--borderWidth-thin));
-        box-shadow: var(--boxShadow-thin) var(--color-action-list-item-default-active-border);
+        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
       }
 
       & .ActionListItem-label::before,
@@ -162,11 +162,11 @@
 
   &[aria-selected='true'] {
     font-weight: var(--base-text-weight-normal);
-    background: var(--color-action-list-item-default-selected-bg);
+    background: var(--control-transparent-bgColor-selected);
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--color-action-list-item-default-hover-bg);
+        background-color: var(--control-transparent-bgColor-hover);
       }
     }
 
@@ -195,11 +195,11 @@
     }
 
     &:not(.ActionListItem--danger) {
-      background: var(--color-action-list-item-default-selected-bg);
+      background: var(--control-transparent-bgColor-selected);
 
       @media (hover: hover) {
         &:hover {
-          background-color: var(--color-action-list-item-default-hover-bg);
+          background-color: var(--control-transparent-bgColor-hover);
         }
       }
 
@@ -222,11 +222,11 @@
     & .ActionListContent {
       & .ActionListItem-label,
       & .ActionListItem-description {
-        color: var(--color-primer-fg-disabled);
+        color: var(--control-fgColor-disabled);
       }
 
       & .ActionListItem-visual {
-        fill: var(--color-primer-fg-disabled);
+        fill: var(--control-fgColor-disabled);
       }
     }
 
@@ -243,31 +243,31 @@
   /* danger */
   &.ActionListItem--danger {
     & .ActionListItem-label {
-      color: var(--color-danger-fg);
+      color: var(--control-danger-fgColor-rest);
     }
 
     & .ActionListItem-visual {
-      color: var(--color-danger-fg);
+      color: var(--control-danger-fgColor-rest);
     }
 
     @media (hover: hover) {
       &:hover {
-        background: var(--color-action-list-item-danger-hover-bg);
+        background: var(--control-danger-bgColor-hover);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--color-action-list-item-danger-hover-text);
+          color: var(--control-danger-fgColor-hover);
         }
       }
     }
 
     & .ActionListContent {
       &:active {
-        background: var(--color-action-list-item-danger-active-bg);
+        background: var(--control-danger-bgColor-active);
 
         & .ActionListItem-label,
         & .ActionListItem-visual {
-          color: var(--color-action-list-item-danger-hover-text);
+          color: var(--control-danger-fgColor-hover);
         }
       }
     }
@@ -281,7 +281,7 @@
   width: 100%;
   padding-block: var(--actionListContent-paddingBlock);
   padding-inline: var(--control-medium-paddingInline-condensed);
-  color: var(--color-fg-default);
+  color: var(--control-fgColor-rest);
   text-align: left;
   user-select: none;
   background-color: transparent;
@@ -310,11 +310,11 @@
   &[aria-disabled='true'] {
     & .ActionListItem-label,
     & .ActionListItem-description {
-      color: var(--color-primer-fg-disabled);
+      color: var(--control-fgColor-disabled);
     }
 
     & .ActionListItem-visual {
-      fill: var(--color-primer-fg-disabled);
+      fill: var(--control-fgColor-disabled);
     }
 
     @media (hover: hover) {
@@ -399,7 +399,7 @@
 
     /* show active indicator on parent collapse if child is active */
     &.ActionListContent--hasActiveSubItem {
-      background: var(--color-action-list-item-default-selected-bg);
+      background: var(--control-transparent-bgColor-selected);
 
       & .ActionListItem-label {
         font-weight: var(--base-text-weight-semibold);
@@ -451,13 +451,13 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--color-accent-fg);
-        stroke: var(--color-accent-fg);
+        fill: var(--control-checked-bgColor-rest);
+        stroke: var(--control-checked-bgColor-rest);
         stroke-width: var(--borderWidth-thin, 1px);
       }
 
       & .ActionListItem-multiSelectCheckmark {
-        fill: var(--color-fg-on-emphasis);
+        fill: var(--fgColor-onEmphasis);
       }
     }
   }
@@ -494,15 +494,15 @@
     /* checkbox */
     & .ActionListItem-multiSelectIcon {
       & .ActionListItem-multiSelectIconRect {
-        fill: var(--color-canvas-default);
-        stroke: var(--color-border-default);
+        fill: var(--bgColor-default);
+        stroke: var(--control-borderColor-rest);
         stroke-width: var(--borderWidth-thin, 1px);
       }
     }
 
     & .ActionListItem-multiSelectIconRect {
-      fill: var(--color-canvas-default);
-      border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
+      fill: var(--bgColor-default);
+      border: var(--borderWidth-thin, 1px) solid var(--control-borderColor-rest);
     }
   }
 
@@ -573,7 +573,7 @@
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-small);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 /* helper for grid alignment with multi-line content
@@ -582,9 +582,9 @@
 .ActionListItem-action {
   display: flex;
   min-height: var(--control-medium-lineBoxHeight);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   pointer-events: none;
-  fill: var(--color-fg-muted);
+  fill: var(--fgColor-muted);
   align-items: center;
 }
 
@@ -594,7 +594,7 @@
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-normal);
   line-height: var(--text-body-lineHeight-medium);
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   grid-area: label;
 }
 
@@ -651,7 +651,7 @@
     font-size: var(--text-body-size-small);
     line-height: var(--text-body-lineHeight-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
     flex-direction: column;
   }
 
@@ -664,14 +664,14 @@
     margin-block-end: var(--base-size-8);
     margin-inline: calc(-1 * var(--base-size-8));
     list-style: none;
-    background: var(--color-action-list-item-inline-divider);
+    background: var(--borderColor-muted);
     border: 0;
   }
 
   & .ActionList-sectionDivider-title {
     font-size: var(--text-body-size-small);
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 }
 
@@ -679,9 +679,9 @@
   margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
   margin-block-end: var(--base-size-8);
   margin-inline: calc(-1 * var(--base-size-8));
-  background: var(--color-canvas-subtle);
-  border-top: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
-  border-bottom: solid var(--borderWidth-thin) var(--color-action-list-item-inline-divider);
+  background: var(--bgColor-muted);
+  border-top: solid var(--borderWidth-thin) var(--borderColor-muted);
+  border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);
 
   /* 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 82cd0b1236..4f3cffd8c2 100644
--- a/app/components/primer/alpha/auto_complete.pcss
+++ b/app/components/primer/alpha/auto_complete.pcss
@@ -36,7 +36,7 @@
   align-items: center;
 
   &:focus-within {
-    border-color: var(--color-accent-fg);
+    border-color: var(--borderColor-accent-emphasis);
 
     @mixin focusBoxShadowInset;
   }
@@ -68,10 +68,10 @@
   overflow-y: auto;
   font-size: 13px;
   list-style: none;
-  background: var(--color-canvas-overlay);
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  background: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium);
 }
 
 /* One of the items that appears within an autocomplete group
@@ -83,19 +83,19 @@
   padding: 4px 8px;
   overflow: hidden;
   font-weight: var(--base-text-weight-semibold);
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: left;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor);
   border: 0;
 
   &:hover {
-    color: var(--color-fg-on-emphasis);
+    color: var(--fgColor-onEmphasis);
     text-decoration: none;
-    background-color: var(--color-accent-emphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {
@@ -106,9 +106,9 @@
   &.selected,
   &[aria-selected='true'],
   &.navigation-focus {
-    color: var(--color-fg-on-emphasis);
+    color: var(--fgColor-onEmphasis);
     text-decoration: none;
-    background-color: var(--color-accent-emphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     /* Inherit color on all child elements to ensure enough contrast */
     & * {
diff --git a/app/components/primer/alpha/banner.pcss b/app/components/primer/alpha/banner.pcss
index f01cb01a66..c60c63dd2e 100644
--- a/app/components/primer/alpha/banner.pcss
+++ b/app/components/primer/alpha/banner.pcss
@@ -4,9 +4,9 @@
   position: relative;
   display: grid;
   padding: var(--base-size-8);
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border: var(--borderWidth-thin) solid var(--color-accent-muted);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);
   border-radius: var(--borderRadius-medium);
   grid-auto-flow: column;
   grid-template-areas: 'visual message actions close';
@@ -73,36 +73,36 @@
   }
 
   & .Banner-visual .octicon {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent);
   }
 
   &.Banner--warning {
-    color: var(--color-fg-default);
-    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-    border-color: var(--color-attention-muted);
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+    border-color: var(--borderColor-attention-muted);
 
     & .Banner-visual .octicon {
-      color: var(--color-attention-fg);
+      color: var(--fgColor-attention);
     }
   }
 
   &.Banner--error {
-    color: var(--color-fg-default);
-    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-    border-color: var(--color-danger-muted);
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+    border-color: var(--borderColor-danger-muted);
 
     & .Banner-visual .octicon {
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger);
     }
   }
 
   &.Banner--success {
-    color: var(--color-fg-default);
-    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-    border-color: var(--color-success-muted);
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+    border-color: var(--borderColor-success-muted);
 
     & .Banner-visual .octicon {
-      color: var(--color-success-fg);
+      color: var(--fgColor-success);
     }
   }
 
diff --git a/app/components/primer/alpha/button_marketing.pcss b/app/components/primer/alpha/button_marketing.pcss
index 744089f8ff..17f3ba5f8e 100644
--- a/app/components/primer/alpha/button_marketing.pcss
+++ b/app/components/primer/alpha/button_marketing.pcss
@@ -10,7 +10,7 @@
   font-size: 1rem;
   font-weight: var(--base-text-weight-semibold);
   line-height: 1;
-  color: var(--color-canvas-default);
+  color: var(--bgColor-default);
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -57,7 +57,7 @@
 
   /* fallback :focus state */
   &:focus {
-    @mixin focusOutline 2px, var(--color-accent-fg);
+    @mixin focusOutline 2px, var(--focus-outlineColor);
 
     /* remove fallback :focus if :focus-visible is supported */
     &:not(:focus-visible) {
@@ -68,7 +68,7 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg);
+    @mixin focusOutline 2px, var(--focus-outlineColor);
   }
 
   &:active {
@@ -86,7 +86,7 @@
 }
 
 .btn-muted-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default) !important;
   background: none !important;
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
@@ -100,17 +100,17 @@
 
   &:active {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;
   }
 
   &:disabled {
     /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+    box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;
   }
 }
 
 .btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default) !important;
   background: none !important;
   box-shadow: none !important;
 
@@ -137,7 +137,7 @@
 
   /* fallback :focus state */
   &:focus {
-    @mixin focusOutline 2px, var(--color-accent-fg);
+    @mixin focusOutline 2px, var(--focus-outlineColor);
 
     /* remove fallback :focus if :focus-visible is supported */
     &:not(:focus-visible) {
@@ -148,7 +148,7 @@
 
   /* default focus state */
   &:focus-visible {
-    @mixin focusOutline 2px, var(--color-accent-fg);
+    @mixin focusOutline 2px, var(--focus-outlineColor);
   }
 }
 
diff --git a/app/components/primer/alpha/dialog.pcss b/app/components/primer/alpha/dialog.pcss
index 6256f8cdce..d797f6b12c 100644
--- a/app/components/primer/alpha/dialog.pcss
+++ b/app/components/primer/alpha/dialog.pcss
@@ -18,9 +18,9 @@
   max-height: min(calc(100vh - 2rem), var(--overlay-height));
   white-space: normal;
   flex-direction: column;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor);
   border-radius: var(--borderRadius-large);
-  box-shadow: var(--color-overlay-shadow);
+  box-shadow: var(--shadow-floating-small);
   opacity: 1;
 
   &.Overlay--size-auto {
@@ -155,7 +155,7 @@
 
   &.Overlay-header--divided {
     padding-bottom: var(--stack-padding-condensed);
-    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--color-border-default);
+    box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
 
     & + .Overlay-body {
       padding-top: var(--stack-padding-normal);
@@ -208,7 +208,7 @@
         margin: 0;
         font-size: var(--text-body-size-small);
         font-weight: var(--base-text-weight-normal);
-        color: var(--color-fg-muted);
+        color: var(--fgColor-muted);
       }
     }
   }
@@ -244,7 +244,7 @@
 
   &.Overlay-footer--divided {
     padding-top: var(--stack-padding-normal);
-    box-shadow: inset 0 var(--borderWidth-thin) var(--color-border-default);
+    box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);
   }
 
   &.Overlay-footer--alignStart {
@@ -270,7 +270,7 @@
   width: var(--base-size-32);
   height: var(--base-size-32);
   padding: 0;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   cursor: pointer;
   user-select: none;
   background-color: transparent;
@@ -284,8 +284,8 @@
 
   &:hover,
   &:focus {
-    background-color: var(--color-btn-hover-bg);
-    border: var(--borderWidth-thin) solid var(--color-btn-hover-bg);
+    background-color: var(--button-default-bgColor-hover);
+    border: var(--borderWidth-thin) solid var(--control-bgColor-hover);
   }
 
   /* Override .close-button's `border: 0` that triggers a border-color transition on hover  */
@@ -302,7 +302,7 @@
   left: 0;
   z-index: 999;
   display: flex;
-  background-color: var(--color-neutral-muted);
+  background-color: var(--bgColor-neutral-muted);
 }
 
 @define-mixin Overlay-backdrop--transparent {
diff --git a/app/components/primer/alpha/dropdown.pcss b/app/components/primer/alpha/dropdown.pcss
index 022df6f9ab..221c3dd3bc 100644
--- a/app/components/primer/alpha/dropdown.pcss
+++ b/app/components/primer/alpha/dropdown.pcss
@@ -30,11 +30,11 @@
   padding-bottom: var(--control-small-paddingBlock);
   margin-top: 2px;
   list-style: none;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor);
   background-clip: padding-box;
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--color-shadow-large);
+  box-shadow: var(--shadow-floating-large);
 
   &::before,
   &::after {
@@ -46,13 +46,13 @@
   /* caret border */
   &::before {
     border: 8px solid transparent;
-    border-bottom-color: var(--color-border-default);
+    border-bottom-color: var(--borderColor-default);
   }
 
   /* caret background (should match dropdown background) */
   &::after {
     border: 7px solid transparent;
-    border-bottom-color: var(--color-canvas-overlay);
+    border-bottom-color: var(--overlay-bgColor);
   }
 
   & > ul {
@@ -76,14 +76,14 @@
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)
     var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   overflow: hidden;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-overflow: ellipsis;
   white-space: nowrap;
 
   &:hover {
-    color: var(--color-fg-on-emphasis);
+    color: var(--fgColor-onEmphasis);
     text-decoration: none;
-    background-color: var(--color-accent-emphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     & > .octicon {
       color: inherit;
@@ -117,13 +117,13 @@
   display: block;
   height: 0;
   margin: var(--stack-gap-condensed) 0;
-  border-top: var(--borderWidth-thin) solid var(--color-border-default);
+  border-top: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .dropdown-header {
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-small);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 .dropdown-item[aria-checked='false'] .octicon-check {
@@ -148,7 +148,7 @@
     right: -16px;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-border-default);
+    border-left-color: var(--borderColor-default);
   }
 
   &::after {
@@ -156,7 +156,7 @@
     right: -14px;
     left: auto;
     border-color: transparent;
-    border-left-color: var(--color-canvas-overlay);
+    border-left-color: var(--overlay-bgColor);
   }
 }
 
@@ -171,14 +171,14 @@
     top: 10px;
     left: -16px;
     border-color: transparent;
-    border-right-color: var(--color-border-default);
+    border-right-color: var(--borderColor-default);
   }
 
   &::after {
     top: 11px;
     left: -14px;
     border-color: transparent;
-    border-right-color: var(--color-canvas-overlay);
+    border-right-color: var(--overlay-bgColor);
   }
 }
 
@@ -197,7 +197,7 @@
   &::before {
     bottom: -8px;
     left: 9px;
-    border-top: 8px solid var(--color-border-default);
+    border-top: 8px solid var(--borderColor-default);
     border-right: 8px solid transparent;
     border-bottom: 0;
     border-left: 8px solid transparent;
@@ -206,7 +206,7 @@
   &::after {
     bottom: -7px;
     left: 10px;
-    border-top: 7px solid var(--color-canvas-overlay);
+    border-top: 7px solid var(--overlay-bgColor);
     border-right: 7px solid transparent;
     border-bottom: 0;
     border-left: 7px solid transparent;
diff --git a/app/components/primer/alpha/layout.pcss b/app/components/primer/alpha/layout.pcss
index 96da1d303a..1c6c39ec94 100644
--- a/app/components/primer/alpha/layout.pcss
+++ b/app/components/primer/alpha/layout.pcss
@@ -70,8 +70,8 @@
     &.Layout-divider--flowRow-shallow {
       height: 8px;
       margin-right: 0;
-      background: var(--color-canvas-inset);
-      border-color: var(--color-border-default);
+      background: var(--bgColor-muted);
+      border-color: var(--borderColor-default);
       border-style: solid;
       border-width: var(--borderWidth-thin) 0;
     }
@@ -208,7 +208,7 @@
       grid-column: 2;
       width: 1px;
       margin-right: -1px;
-      background: var(--color-border-default);
+      background: var(--borderColor-default);
     }
 
     & .Layout-main {
diff --git a/app/components/primer/alpha/menu.pcss b/app/components/primer/alpha/menu.pcss
index 07244996a6..4e77ce7d81 100644
--- a/app/components/primer/alpha/menu.pcss
+++ b/app/components/primer/alpha/menu.pcss
@@ -5,8 +5,8 @@
 .menu {
   margin-bottom: var(--stack-gap-normal);
   list-style: none;
-  background-color: var(--color-canvas-default);
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
 }
 
@@ -14,8 +14,8 @@
   position: relative;
   display: block;
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
-  color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
 
   &:first-child {
     border-top: 0;
@@ -39,18 +39,18 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted);
   }
 
   &:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted);
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     cursor: default;
-    background-color: var(--color-menu-bg-active);
+    background-color: var(--menu-bgColor-active);
 
     &::before {
       position: absolute;
@@ -59,14 +59,14 @@
       left: 0;
       width: 2px;
       content: '';
-      background-color: var(--color-primer-border-active);
+      background-color: var(--underlineNav-borderColor-active);
     }
   }
 
   & .octicon {
     width: 16px;
     margin-right: var(--control-medium-gap);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
     text-align: center;
   }
 
@@ -77,7 +77,7 @@
 
   & .menu-warning {
     float: right;
-    color: var(--color-attention-fg);
+    color: var(--fgColor-attention);
   }
 
   & .avatar {
@@ -87,7 +87,7 @@
 
   &.alert {
     & .Counter {
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger);
     }
   }
 }
@@ -99,8 +99,8 @@
   margin-bottom: 0;
   font-size: inherit;
   font-weight: var(--base-text-weight-semibold);
-  color: var(--color-fg-default);
-  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
+  color: var(--fgColor-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
 
   &:hover {
     text-decoration: none;
diff --git a/app/components/primer/alpha/segmented_control.pcss b/app/components/primer/alpha/segmented_control.pcss
index 7a71d58452..0d2d8b179a 100644
--- a/app/components/primer/alpha/segmented_control.pcss
+++ b/app/components/primer/alpha/segmented_control.pcss
@@ -3,7 +3,7 @@
 .SegmentedControl {
   display: inline-flex;
   list-style: none;
-  background-color: var(--color-segmented-control-bg);
+  background-color: var(--controlTrack-bgColor-rest);
   border-radius: var(--borderRadius-medium);
 }
 
@@ -16,8 +16,8 @@
 
   /* Selected ---------------------------------------- */
   &.SegmentedControl-item--selected {
-    background-color: var(--color-segmented-control-button-bg);
-    border-color: var(--color-segmented-control-button-selected-border);
+    background-color: var(--controlKnob-bgColor-rest);
+    border-color: var(--controlKnob-borderColor-rest);
 
     & .Button {
       font-weight: var(--base-text-weight-semibold);
@@ -53,7 +53,7 @@
       margin-top: var(--control-medium-paddingBlock);
       margin-bottom: var(--control-medium-paddingBlock);
       content: '';
-      border-left: var(--borderWidth-thin) solid var(--color-border-default);
+      border-left: var(--borderWidth-thin) solid var(--borderColor-default);
     }
   }
 
@@ -62,7 +62,7 @@
     border: 0;
     font-weight: var(--base-text-weight-normal);
     transition: none;
-    color: var(--color-btn-text);
+    color: var(--control-fgColor-rest);
 
     &:focus-visible {
       outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
@@ -126,7 +126,7 @@
   }
 
   & .Button--invisible.Button--invisible-noVisuals .Button-label {
-    color: var(--color-btn-text);
+    color: var(--control-fgColor-rest);
   }
 }
 
diff --git a/app/components/primer/alpha/tab_nav.pcss b/app/components/primer/alpha/tab_nav.pcss
index 2923d8c6a3..a646e66889 100644
--- a/app/components/primer/alpha/tab_nav.pcss
+++ b/app/components/primer/alpha/tab_nav.pcss
@@ -4,7 +4,7 @@
 .tabnav {
   margin-top: 0;
   margin-bottom: var(--stack-gap-normal);
-  border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 }
 
 .tabnav-tabs {
@@ -19,7 +19,7 @@
   padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-medium);
   line-height: 23px;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   text-decoration: none;
   background-color: transparent;
   border: var(--borderWidth-thin) solid transparent;
@@ -29,9 +29,9 @@
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-default); /* cover bottom border */
-    border-color: var(--color-border-default);
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-default); /* cover bottom border */
+    border-color: var(--borderColor-default);
     border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
 
     & .octicon {
@@ -40,7 +40,7 @@
   }
 
   &:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default);
     text-decoration: none;
     transition-duration: 0.1s;
   }
@@ -52,12 +52,12 @@
   }
 
   &:active {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 
   & .octicon {
     margin-right: var(--control-small-gap);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 
   & .Counter {
@@ -76,7 +76,7 @@
   padding-top: 10px;
   margin-left: 10px;
   font-size: var(--text-body-size-small);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 
   & > .octicon {
     margin-right: 2px;
@@ -86,7 +86,7 @@
 /* When tabnav-extra are anchors
 ** stylelint-disable-next-line selector-no-qualifying-type */
 a.tabnav-extra:hover {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent);
   text-decoration: none;
 }
 
diff --git a/app/components/primer/alpha/text_field.pcss b/app/components/primer/alpha/text_field.pcss
index 6741e26579..2ed0a471d9 100644
--- a/app/components/primer/alpha/text_field.pcss
+++ b/app/components/primer/alpha/text_field.pcss
@@ -17,7 +17,7 @@
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-semibold);
   line-height: var(--text-body-lineHeight-medium);
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   user-select: none;
 }
 
@@ -27,7 +27,7 @@
   font-size: var(--text-caption-size);
   font-weight: var(--text-caption-weight);
   line-height: var(--text-caption-lineHeight);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 /* inline validation message */
@@ -36,8 +36,8 @@
   font-size: var(--text-caption-size);
   line-height: var(--text-caption-lineHeight);
   font-weight: var(--base-text-weight-semibold);
-  color: var(--color-danger-fg);
-  fill: var(--color-danger-fg);
+  color: var(--control-borderColor-danger);
+  fill: var(--control-borderColor-danger);
   flex-direction: row;
   align-items: flex-start;
   gap: var(--base-size-4);
@@ -66,21 +66,21 @@
 
 /* shared among all form control components (input, select, textarea, checkbox, radio) */
 @define-mixin Field {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest);
 
   &[disabled] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--control-fgColor-disabled);
     cursor: not-allowed;
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
     opacity: 1;
-    -webkit-text-fill-color: var(--color-primer-fg-disabled);
+    -webkit-text-fill-color: var(--control-fgColor-disabled);
   }
 
   &:not(:focus)[invalid] {
-    border-color: var(--color-danger-emphasis);
+    border-color: var(--control-borderColor-danger);
   }
 
   &:not([type='checkbox'], [type='radio']):focus {
@@ -148,16 +148,16 @@
 
   &[disabled] {
     &::placeholder {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled);
     }
   }
 
   &[readonly] {
-    background-color: var(--color-input-disabled-bg);
+    background-color: var(--control-bgColor-disabled);
   }
 
   &::placeholder {
-    color: var(--color-fg-subtle);
+    color: var(--fgColor-muted);
     opacity: 1;
   }
 
@@ -183,11 +183,11 @@
   /* variants */
 
   &.FormControl-inset {
-    background-color: var(--color-canvas-inset);
+    background-color: var(--bgColor-muted);
 
     &:focus-visible,
     &:focus {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default);
     }
   }
 
@@ -198,15 +198,15 @@
   /* validation states */
 
   &.FormControl-error {
-    border-color: var(--color-danger-emphasis);
+    border-color: var(--control-borderColor-danger);
   }
 
   &.FormControl-success {
-    border-color: var(--color-success-emphasis);
+    border-color: var(--control-borderColor-success);
   }
 
   &.FormControl-warning {
-    border-color: var(--color-attention-emphasis);
+    border-color: var(--control-borderColor-warning);
   }
 }
 
@@ -228,7 +228,7 @@
     display: block;
     width: var(--base-size-16);
     height: var(--base-size-16);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
     pointer-events: none;
 
     /* octicon */
@@ -248,7 +248,7 @@
     width: var(--control-xsmall-size);
     height: var(--control-xsmall-size);
     padding: 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
     cursor: pointer;
     background: transparent;
     border: 0;
@@ -263,16 +263,16 @@
     }
 
     &[disabled] {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled);
       pointer-events: none;
     }
 
     &:hover {
-      background: var(--color-action-list-item-default-hover-bg);
+      background: var(--control-transparent-bgColor-hover);
     }
 
     &:active {
-      background: var(--color-action-list-item-default-active-bg);
+      background: var(--control-transparent-bgColor-active);
     }
 
     /* show vertical divider line between field and button */
@@ -285,7 +285,7 @@
         width: var(--borderWidth-thin);
         height: var(--base-size-16);
         content: '';
-        background: var(--color-border-default);
+        background: var(--borderColor-default);
       }
     }
 
@@ -486,7 +486,7 @@
     padding-right: var(--base-size-4);
     pointer-events: none;
     content: '';
-    background-color: var(--color-fg-muted);
+    background-color: var(--bgColor-neutral-emphasis);
     mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
     mask-size: contain;
     mask-repeat: no-repeat;
@@ -561,7 +561,7 @@ input[type='checkbox'].FormControl-checkbox {
   margin: 0;
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
-  border-color: var(--color-neutral-emphasis);
+  border-color: var(--control-borderColor-emphasis);
   border-radius: var(--borderRadius-small);
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
   appearance: none;
@@ -572,7 +572,7 @@ input[type='checkbox'].FormControl-checkbox {
     height: var(--base-size-16);
     visibility: hidden;
     content: '';
-    background-color: var(--color-fg-on-emphasis);
+    background-color: var(--fgColor-onEmphasis);
     transition: visibility 0s linear 230ms;
     clip-path: inset(var(--base-size-16) 0 0 0);
 
@@ -596,15 +596,15 @@ input[type='checkbox'].FormControl-checkbox {
     & ~ .FormControl-checkbox-labelWrap,
     & ~ .FormControl-radio-labelWrap {
       & .FormControl-label {
-        color: var(--color-primer-fg-disabled);
+        color: var(--control-fgColor-disabled);
         cursor: not-allowed;
       }
     }
   }
 
   &:checked {
-    background: var(--color-accent-fg);
-    border-color: var(--color-accent-fg);
+    background: var(--control-checked-bgColor-rest);
+    border-color: var(--control-checked-borderColor-rest);
     transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
 
     &::before {
@@ -618,12 +618,12 @@ input[type='checkbox'].FormControl-checkbox {
 
     &:disabled {
       cursor: not-allowed;
-      background-color: var(--color-primer-fg-disabled);
-      border-color: var(--color-primer-fg-disabled);
+      background-color: var(--control-fgColor-disabled);
+      border-color: var(--control-fgColor-disabled);
       opacity: 1;
 
       &::before {
-        background-color: var(--color-fg-on-emphasis);
+        background-color: var(--fgColor-onEmphasis);
       }
     }
 
@@ -655,7 +655,7 @@ input[type='radio'].FormControl-radio {
   margin: 0;
   margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
   cursor: pointer;
-  border-color: var(--color-neutral-emphasis);
+  border-color: var(--control-borderColor-emphasis);
   border-radius: var(--borderRadius-full);
   transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
   appearance: none;
@@ -665,12 +665,12 @@ input[type='radio'].FormControl-radio {
   }
 
   &:checked {
-    border-color: var(--color-accent-fg);
+    border-color: var(--control-checked-borderColor-rest);
     border-width: var(--base-size-4);
 
     &:disabled {
       cursor: not-allowed;
-      border-color: var(--color-primer-fg-disabled);
+      border-color: var(--control-fgColor-disabled);
     }
   }
 
diff --git a/app/components/primer/alpha/toggle_switch.pcss b/app/components/primer/alpha/toggle_switch.pcss
index d15142ad87..cd265a679b 100644
--- a/app/components/primer/alpha/toggle_switch.pcss
+++ b/app/components/primer/alpha/toggle_switch.pcss
@@ -34,8 +34,8 @@
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background-color: var(--color-switch-track-bg);
-  border: var(--borderWidth-thin) solid var(--color-switch-track-border);
+  background-color: var(--controlTrack-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);
   border-radius: var(--borderRadius-medium);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
@@ -48,11 +48,11 @@
   }
 
   &:hover {
-    background-color: var(--color-switch-track-hover-bg);
+    background-color: var(--controlTrack-bgColor-hover);
   }
 
   &:active {
-    background-color: var(--color-switch-track-active-bg);
+    background-color: var(--controlTrack-bgColor-active);
   }
 
   @media (pointer: coarse) {
@@ -71,28 +71,28 @@
 }
 
 .ToggleSwitch-track[aria-pressed='true'][disabled] {
-  background-color: var(--color-switch-track-disabled-bg);
-  color: var(--color-switch-track-checked-disabled-fg);
+  background-color: var(--controlTrack-bgColor-disabled);
+  color: var(--control-checked-fgColor-disabled);
   border-color: transparent;
 }
 
 .ToggleSwitch-track[aria-pressed='true'] {
-  background-color: var(--color-switch-track-checked-bg);
-  border-color: var(--color-switch-track-checked-border);
+  background-color: var(--control-checked-bgColor-rest);
+  border-color: var(--controlTrack-borderColor-rest);
 
   &:not([disabled]) {
     &:hover {
-      background-color: var(--color-switch-track-checked-hover-bg);
+      background-color: var(--control-checked-bgColor-hover);
     }
 
     &:active {
-      background-color: var(--color-switch-track-checked-active-bg);
+      background-color: var(--control-checked-bgColor-active);
     }
   }
 
   & .ToggleSwitch-knob {
-    background-color: var(--color-switch-knob-checked-bg);
-    border-color: var(--color-switch-knob-checked-border);
+    background-color: var(--controlKnob-bgColor-checked);
+    border-color: var(--controlKnob-borderColor-checked);
     transform: translateX(100%);
   }
 
@@ -107,21 +107,21 @@
 
 .ToggleSwitch-track[disabled] {
   cursor: not-allowed;
-  background-color: var(--color-switch-track-disabled-bg);
+  background-color: var(--controlTrack-bgColor-disabled);
   border-color: transparent;
   transition-property: none;
 
   & .ToggleSwitch-knob {
-    border-color: var(--color-border-default);
+    border-color: var(--controlKnob-borderColor-disabled);
     box-shadow: none;
   }
 
   & .ToggleSwitch-lineIcon {
-    color: var(--color-switch-track-disabled-fg);
+    color: var(--controlTrack-fgColor-disabled);
   }
 
   & .ToggleSwitch-circleIcon {
-    color: var(--color-switch-track-disabled-fg);
+    color: var(--controlTrack-fgColor-disabled);
   }
 }
 
@@ -135,7 +135,7 @@
 
 .ToggleSwitch-lineIcon {
   line-height: 0;
-  color: var(--color-switch-track-checked-fg);
+  color: var(--control-checked-fgColor-rest);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(-100%);
@@ -144,7 +144,7 @@
 
 .ToggleSwitch-circleIcon {
   line-height: 0;
-  color: var(--color-switch-track-fg);
+  color: var(--controlTrack-fgColor-rest);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(0);
@@ -157,10 +157,10 @@
   bottom: 0;
   z-index: 1;
   width: 50%;
-  background-color: var(--color-switch-knob-bg);
-  border: var(--borderWidth-thin) solid var(--color-switch-knob-border);
+  background-color: var(--controlKnob-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
+  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
   transition-property: transform;
@@ -174,7 +174,7 @@
   position: relative;
   font-size: var(--text-body-size-medium);
   line-height: 1.5;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: right;
 }
 
@@ -197,7 +197,7 @@
 
 .ToggleSwitch--disabled {
   & .ToggleSwitch-status {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 }
 
diff --git a/app/components/primer/alpha/underline_nav.pcss b/app/components/primer/alpha/underline_nav.pcss
index 5823e81acd..7198b968ac 100644
--- a/app/components/primer/alpha/underline_nav.pcss
+++ b/app/components/primer/alpha/underline_nav.pcss
@@ -5,19 +5,19 @@
   min-height: var(--base-size-48);
   overflow-x: auto;
   overflow-y: hidden;
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
   -webkit-overflow-scrolling: auto;
   justify-content: space-between;
 
   & .Counter {
     margin-left: var(--control-medium-gap);
-    color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-neutral-muted);
   }
 
   & .Counter--primary {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-neutral-emphasis);
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-neutral-emphasis);
   }
 }
 
@@ -34,7 +34,7 @@
   padding: 0 var(--control-medium-paddingInline-condensed);
   font-size: var(--text-body-size-medium);
   line-height: 30px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
@@ -46,9 +46,9 @@
   &:hover,
   &:focus,
   &:focus-visible {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default);
     text-decoration: none;
-    border-bottom-color: var(--color-neutral-muted);
+    border-bottom-color: var(--borderColor-neutral-muted);
     outline-offset: -2px;
     transition: border-bottom-color 0.12s ease-out;
   }
@@ -70,9 +70,9 @@
   /* hover state was "sticking" on mobile after click */
   @media (pointer: fine) {
     &:hover {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default);
       text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
+      background: var(--control-transparent-bgColor-hover);
       transition: background 0.12s ease-out;
     }
   }
@@ -81,8 +81,8 @@
   &[role='tab'][aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
+    color: var(--fgColor-default);
+    border-bottom-color: var(--underlineNav-borderColor-active);
 
     /* current/selected underline */
     &::after {
@@ -93,7 +93,7 @@
       width: 100%;
       height: 2px;
       content: '';
-      background: var(--color-primer-border-active);
+      background: var(--underlineNav-borderColor-active);
       border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);
     }
@@ -124,8 +124,8 @@
 .UnderlineNav-octicon {
   display: inline !important;
   margin-right: var(--control-medium-gap);
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
+  color: var(--fgColor-muted);
+  fill: var(--fgColor-muted);
 }
 
 .UnderlineNav-container {
diff --git a/app/components/primer/beta/avatar.pcss b/app/components/primer/beta/avatar.pcss
index 57d817e2be..ac9ebc5629 100644
--- a/app/components/primer/beta/avatar.pcss
+++ b/app/components/primer/beta/avatar.pcss
@@ -5,10 +5,10 @@
   overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
   line-height: 1;
   vertical-align: middle;
-  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
+  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
   border-radius: var(--borderRadius-medium);
   flex-shrink: 0;
-  box-shadow: 0 0 0 1px var(--color-avatar-border);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
 }
 
 .avatar-link {
diff --git a/app/components/primer/beta/avatar_stack.pcss b/app/components/primer/beta/avatar_stack.pcss
index 9aaac215de..bdce9d9fdc 100644
--- a/app/components/primer/beta/avatar_stack.pcss
+++ b/app/components/primer/beta/avatar_stack.pcss
@@ -23,7 +23,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: var(--color-canvas-default);
+  background: var(--bgColor-default);
   border-radius: 100px;
 
   & .avatar {
@@ -34,8 +34,8 @@
     height: 20px;
     box-sizing: content-box;
     margin-right: -11px;
-    background-color: var(--color-canvas-default);
-    border-right: var(--borderWidth-thin) solid var(--color-canvas-default);
+    background-color: var(--bgColor-default);
+    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     box-shadow: none;
     transition: margin 0.1s ease-in-out;
@@ -79,7 +79,7 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: var(--color-canvas-subtle);
+  background: var(--bgColor-muted);
 
   &::before,
   &::after {
@@ -88,17 +88,17 @@
     height: 20px;
     content: '';
     border-radius: 2px;
-    outline: var(--borderWidth-thin) solid var(--color-canvas-default);
+    outline: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 
   &::before {
     width: 17px;
-    background: var(--color-avatar-stack-fade-more);
+    background: var(--avatarStack-fade-bgColor-muted);
   }
 
   &::after {
     width: 14px;
-    background: var(--color-avatar-stack-fade);
+    background: var(--avatarStack-fade-bgColor-default);
   }
 }
 
@@ -120,7 +120,7 @@
   }
 
   & .avatar.avatar-more {
-    background: var(--color-avatar-stack-fade);
+    background: var(--avatarStack-fade-bgColor-default);
 
     &::before {
       width: 5px;
@@ -128,7 +128,7 @@
 
     &::after {
       width: 2px;
-      background: var(--color-canvas-subtle);
+      background: var(--bgColor-muted);
     }
   }
 
@@ -136,6 +136,6 @@
     margin-right: 0;
     margin-left: -11px;
     border-right: 0;
-    border-left: var(--borderWidth-thin) solid var(--color-canvas-default);
+    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }
diff --git a/app/components/primer/beta/blankslate.pcss b/app/components/primer/beta/blankslate.pcss
index 64fffe3505..e3d51ff69f 100644
--- a/app/components/primer/beta/blankslate.pcss
+++ b/app/components/primer/beta/blankslate.pcss
@@ -6,14 +6,14 @@
   text-align: center;
 
   & p {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 
   & code {
     padding: 2px 5px 3px;
     font-size: var(--text-body-size-medium);
-    background: var(--color-canvas-default);
-    border: var(--borderWidth-thin) solid var(--color-border-muted);
+    background: var(--bgColor-default);
+    border: var(--borderWidth-thin) solid var(--borderColor-muted);
     border-radius: var(--borderRadius-medium);
   }
 
@@ -27,7 +27,7 @@
   margin-right: var(--control-small-gap);
   margin-bottom: var(--stack-gap-condensed);
   margin-left: var(--control-small-gap);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 .blankslate-image {
diff --git a/app/components/primer/beta/border_box.pcss b/app/components/primer/beta/border_box.pcss
index 60f48966ff..9beb7f33f4 100644
--- a/app/components/primer/beta/border_box.pcss
+++ b/app/components/primer/beta/border_box.pcss
@@ -2,8 +2,8 @@
 
 /* TODO: Rename to BorderBox to match PVC */
 .Box {
-  background-color: var(--color-canvas-default);
-  border-color: var(--color-border-default);
+  background-color: var(--bgColor-default);
+  border-color: var(--borderColor-default);
   border-style: solid;
   border-width: var(--borderWidth-thin);
   border-radius: var(--borderRadius-medium);
@@ -71,8 +71,8 @@
 .Box-header {
   padding: var(--stack-padding-normal);
   margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;
-  background-color: var(--color-canvas-subtle);
-  border-color: var(--color-border-default);
+  background-color: var(--bgColor-muted);
+  border-color: var(--borderColor-default);
   border-style: solid;
   border-width: var(--borderWidth-thin);
   border-top-left-radius: var(--borderRadius-medium);
@@ -86,7 +86,7 @@
 
 .Box-body {
   padding: var(--stack-padding-normal);
-  border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 
   /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
   &:last-of-type {
@@ -101,7 +101,7 @@
   padding: var(--stack-padding-normal);
   margin-top: calc(var(--borderWidth-thin) * -1);
   list-style-type: none; /* To account for applying Box component to a list */
-  border-top-color: var(--color-border-muted);
+  border-top-color: var(--borderColor-muted);
   border-top-style: solid;
   border-top-width: var(--borderWidth-thin);
 
@@ -120,13 +120,13 @@
   &.Box-row--unread,
   /* .unread to be deprecated with .Box-row-unread */
   &.unread {
-    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
   }
 
   &.navigation-focus {
     /* Focus styles for when drag icon */
     & .Box-row--drag-button {
-      color: var(--color-accent-fg);
+      color: var(--fgColor-accent);
       cursor: grab;
       opacity: 100;
     }
@@ -138,12 +138,12 @@
 
     /* Row dragging styles */
     &.sortable-chosen {
-      background-color: var(--color-canvas-subtle);
+      background-color: var(--bgColor-muted);
     }
 
     /* Makes dragging row background gray */
     &.sortable-ghost {
-      background-color: var(--color-canvas-subtle);
+      background-color: var(--bgColor-muted);
 
       /* Hides contents of row while dragging so row looks solid gray */
       & .Box-row--drag-hide {
@@ -155,25 +155,25 @@
 
 .Box-row--focus-gray {
   &.navigation-focus {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted);
   }
 }
 
 .Box-row--focus-blue {
   &.navigation-focus {
-    background-color: var(--color-accent-subtle);
+    background-color: var(--bgColor-accent-muted);
   }
 }
 
 .Box-row--hover-gray {
   &:hover {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted);
   }
 }
 
 .Box-row--hover-blue {
   &:hover {
-    background-color: var(--color-accent-subtle);
+    background-color: var(--bgColor-accent-muted);
   }
 }
 
@@ -182,11 +182,11 @@
 ** and links are dark-gray with blue hover on desktop. */
 .Box-row-link {
   @media (min-width: 768px) {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default);
     text-decoration: none;
 
     &:hover {
-      color: var(--color-accent-fg);
+      color: var(--fgColor-accent);
       text-decoration: none;
     }
   }
@@ -201,7 +201,7 @@
 .Box-footer {
   padding: var(--stack-padding-normal);
   margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */
-  border-top-color: var(--color-border-default);
+  border-top-color: var(--borderColor-default);
   border-top-style: solid;
   border-top-width: var(--borderWidth-thin);
   border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
@@ -216,61 +216,61 @@
 /* Box themes */
 
 .Box--blue {
-  border-color: var(--color-accent-muted);
+  border-color: var(--borderColor-accent-muted);
 
   & .Box-header {
-    background-color: var(--color-accent-subtle);
-    border-color: var(--color-accent-muted);
+    background-color: var(--bgColor-accent-muted);
+    border-color: var(--borderColor-accent-muted);
   }
 
   & .Box-body {
-    border-color: var(--color-accent-muted);
+    border-color: var(--borderColor-accent-muted);
   }
 
   & .Box-row {
-    border-color: var(--color-accent-muted);
+    border-color: var(--borderColor-accent-muted);
   }
 
   & .Box-footer {
-    border-color: var(--color-accent-muted);
+    border-color: var(--borderColor-accent-muted);
   }
 }
 
 /* Applies and red border to the outside of the box,
 ** but not to the border separating rows. */
 .Box--danger {
-  border-color: var(--color-danger-emphasis);
+  border-color: var(--borderColor-danger-emphasis);
 
   & .Box-row {
     &:first-of-type {
-      border-color: var(--color-danger-emphasis);
+      border-color: var(--borderColor-danger-emphasis);
     }
   }
 
   & .Box-body {
     &:last-of-type {
-      border-color: var(--color-danger-emphasis);
+      border-color: var(--borderColor-danger-emphasis);
     }
   }
 }
 
 .Box-header--blue {
-  background-color: var(--color-accent-subtle);
-  border-color: var(--color-accent-muted);
+  background-color: var(--bgColor-accent-muted);
+  border-color: var(--borderColor-accent-muted);
 }
 
 /* Box row highlight themes */
 
 .Box-row--yellow {
-  background-color: var(--color-attention-subtle);
+  background-color: var(--bgColor-attention-muted);
 }
 
 .Box-row--blue {
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted);
 }
 
 .Box-row--gray {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted);
 }
 
 /* Box with btn-octicon */
diff --git a/app/components/primer/beta/breadcrumbs.pcss b/app/components/primer/beta/breadcrumbs.pcss
index af8ecba1d6..330b9fe428 100644
--- a/app/components/primer/beta/breadcrumbs.pcss
+++ b/app/components/primer/beta/breadcrumbs.pcss
@@ -9,7 +9,7 @@
     height: 0.8em;
     margin: 0 0.5em;
     content: '';
-    border-right: 0.1em solid var(--color-fg-muted);
+    border-right: 0.1em solid var(--fgColor-muted);
     transform: rotate(15deg);
   }
 
@@ -26,5 +26,5 @@
 }
 
 .breadcrumb-item-selected a {
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
 }
diff --git a/app/components/primer/beta/button.pcss b/app/components/primer/beta/button.pcss
index 0911c90ebc..9ff1dbbd24 100644
--- a/app/components/primer/beta/button.pcss
+++ b/app/components/primer/beta/button.pcss
@@ -17,7 +17,7 @@
   border: var(--borderWidth-thin) solid;
   border-color: transparent;
   border-radius: var(--borderRadius-medium);
-  color: var(--color-btn-text);
+  color: var(--button-default-fgColor-rest);
   transition: var(--duration-fast) var(--easing-easeInOut);
   transition-property: color, fill, background-color, border-color;
   text-align: center;
@@ -96,7 +96,7 @@ summary.Button {
 
   & .Counter {
     color: inherit;
-    background-color: var(--color-btn-counter-bg);
+    background-color: var(--buttonCounter-default-bgColor-rest);
   }
 }
 
@@ -161,15 +161,15 @@ summary.Button {
 
 /* primary */
 .Button--primary {
-  color: var(--color-btn-primary-text);
-  fill: var(--color-btn-primary-icon);
-  background-color: var(--color-btn-primary-bg);
-  border-color: var(--color-btn-primary-border);
-  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+  color: var(--button-primary-fgColor-rest);
+  fill: var(--button-primary-iconColor-rest);
+  background-color: var(--button-primary-bgColor-rest);
+  border-color: var(--button-primary-borderColor-rest);
+  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
   &:hover:not(:disabled) {
-    background-color: var(--color-btn-primary-hover-bg);
-    border-color: var(--color-btn-primary-hover-border);
+    background-color: var(--button-primary-bgColor-hover);
+    border-color: var(--button-primary-borderColor-hover);
   }
 
   /* fallback :focus state */
@@ -190,93 +190,93 @@ summary.Button {
 
   &:active:not(:disabled),
   &[aria-pressed='true'] {
-    background-color: var(--color-btn-primary-selected-bg);
-    box-shadow: var(--color-btn-primary-selected-shadow);
+    background-color: var(--button-primary-bgColor-active);
+    box-shadow: var(--button-primary-shadow-selected);
   }
 
   &:disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-primary-disabled-text);
-    background-color: var(--color-btn-primary-disabled-bg);
-    border-color: var(--color-btn-primary-disabled-border);
-    fill: var(--color-btn-primary-disabled-text);
+    color: var(--button-primary-fgColor-disabled);
+    background-color: var(--button-primary-bgColor-disabled);
+    border-color: var(--button-primary-borderColor-disabled);
+    fill: var(--button-primary-fgColor-disabled);
   }
 
   & .Counter {
     color: inherit;
-    background-color: var(--color-btn-primary-counter-bg);
+    background-color: var(--buttonCounter-primary-bgColor-rest);
   }
 }
 
 /* default (secondary) */
 .Button--secondary {
-  color: var(--color-btn-text);
-  fill: var(--color-fg-muted); /* help this */
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  color: var(--button-default-fgColor-rest);
+  fill: var(--fgColor-muted); /* help this */
+  background-color: var(--button-default-bgColor-rest);
+  border-color: var(--button-default-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
   &:hover:not(:disabled) {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
+    background-color: var(--button-default-bgColor-hover);
+    border-color: var(--button-default-borderColor-hover);
   }
 
   &:active:not(:disabled) {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
+    background-color: var(--button-default-bgColor-active);
+    border-color: var(--button-default-borderColor-active);
   }
 
   &[aria-pressed='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
+    background-color: var(--button-default-bgColor-selected);
+    box-shadow: var(--shadow-inset);
   }
 
   &:disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled);
+    background-color: var(--button-default-bgColor-rest);
+    border-color: var(--button-default-borderColor-rest);
+    fill: var(--fgColor-disabled);
   }
 }
 
 .Button--invisible {
-  color: var(--color-btn-text);
+  color: var(--button-invisible-fgColor-rest);
 
   &:hover:not(:disabled) {
-    background-color: var(--color-action-list-item-default-hover-bg);
+    background-color: var(--button-invisible-bgColor-hover);
   }
 
   &[aria-pressed='true'],
   &:active:not(:disabled) {
-    background-color: var(--color-action-list-item-default-active-bg);
+    background-color: var(--button-invisible-bgColor-active);
   }
 
   &:disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
-    fill: var(--color-primer-fg-disabled);
+    color: var(--button-invisible-fgColor-disabled);
+    background-color: var(--button-invisible-bgColor-disabled);
+    border-color: transparent;
+    fill: var(--button-invisible-fgColor-disabled);
   }
 
   /* if button has no visuals, use link blue for text */
   &.Button--invisible-noVisuals .Button-label {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-link-rest);
   }
 
   & .Button-visual {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
 
     & .Counter {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default);
     }
   }
 }
 
 .Button--link {
-  color: var(--color-accent-fg);
-  fill: var(--color-accent-fg);
+  color: var(--fgColor-link-rest);
+  fill: var(--fgColor-link-rest);
   display: inline-block;
   font-size: inherit;
   border: none;
@@ -294,59 +294,59 @@ summary.Button {
 
   &:disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled);
     background-color: transparent;
     border-color: transparent;
-    fill: var(--color-primer-fg-disabled);
+    fill: var(--fgColor-disabled);
   }
 }
 
 /* danger */
 .Button--danger {
-  color: var(--color-btn-danger-text);
-  fill: var(--color-btn-danger-icon);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  color: var(--button-danger-fgColor-rest);
+  fill: var(--button-danger-iconColor-rest);
+  background-color: var(--button-danger-bgColor-rest);
+  border-color: var(--button-danger-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
 
   &:hover:not(:disabled) {
-    color: var(--color-btn-danger-hover-text);
-    fill: var(--color-btn-danger-hover-text);
-    background-color: var(--color-btn-danger-hover-bg);
-    border-color: var(--color-btn-danger-hover-border);
-    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+    color: var(--button-danger-fgColor-hover);
+    fill: var(--button-danger-fgColor-hover);
+    background-color: var(--button-danger-bgColor-hover);
+    border-color: var(--button-danger-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
     & .Counter {
-      color: var(--color-btn-danger-hover-counter-fg);
-      background-color: var(--color-btn-danger-hover-counter-bg);
+      color: var(--buttonCounter-danger-fgColor-hover);
+      background-color: var(--buttonCounter-danger-bgColor-hover);
     }
   }
 
   &:active:not(:disabled),
   &[aria-pressed='true'] {
-    color: var(--color-btn-danger-selected-text);
-    fill: var(--color-btn-danger-selected-text);
-    background-color: var(--color-btn-danger-selected-bg);
-    border-color: var(--color-btn-danger-selected-border);
-    box-shadow: var(--color-btn-danger-selected-shadow);
+    color: var(--button-danger-fgColor-active);
+    fill: var(--button-danger-fgColor-active);
+    background-color: var(--button-danger-bgColor-active);
+    border-color: var(--button-danger-borderColor-active);
+    box-shadow: var(--button-danger-shadow-selected);
   }
 
   &:disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-danger-disabled-text);
-    fill: var(--color-btn-danger-disabled-text);
-    background-color: var(--color-btn-danger-disabled-bg);
-    border-color: var(--color-btn-border);
+    color: var(--button-danger-fgColor-disabled);
+    fill: var(--button-danger-fgColor-disabled);
+    background-color: var(--button-danger-bgColor-disabled);
+    border-color: var(--button-default-borderColor-rest);
 
     & .Counter {
-      color: var(--color-btn-danger-disabled-counter-fg);
-      background-color: var(--color-btn-danger-disabled-counter-bg);
+      color: var(--buttonCounter-danger-fgColor-disabled);
+      background-color: var(--buttonCounter-danger-bgColor-disabled);
     }
   }
 
   & .Counter {
-    color: var(--color-btn-danger-counter-fg);
-    background-color: var(--color-btn-danger-counter-bg);
+    color: var(--buttonCounter-danger-fgColor-rest);
+    background-color: var(--buttonCounter-danger-bgColor-rest);
   }
 }
 
diff --git a/app/components/primer/beta/counter.pcss b/app/components/primer/beta/counter.pcss
index f21e0494f6..cb13c78d91 100644
--- a/app/components/primer/beta/counter.pcss
+++ b/app/components/primer/beta/counter.pcss
@@ -7,10 +7,10 @@
   font-size: var(--text-body-size-small);
   font-weight: var(--base-text-weight-medium);
   line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: center;
-  background-color: var(--color-neutral-muted);
-  border: var(--borderWidth-thin) solid var(--color-counter-border);
+  background-color: var(--bgColor-neutral-muted);
+  border: var(--borderWidth-thin) solid var(--counter-borderColor);
   border-radius: 2em;
 
   &:empty {
@@ -25,11 +25,11 @@
 }
 
 .Counter--primary {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
 }
 
 .Counter--secondary {
-  color: var(--color-fg-muted);
-  background-color: var(--color-neutral-subtle);
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-neutral-muted);
 }
diff --git a/app/components/primer/beta/flash.pcss b/app/components/primer/beta/flash.pcss
index e1b7d1c3fd..7ea463cf1f 100644
--- a/app/components/primer/beta/flash.pcss
+++ b/app/components/primer/beta/flash.pcss
@@ -9,12 +9,12 @@
   border-radius: var(--borderRadius-medium);
 
   /* Default color */
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
-  border-color: var(--color-accent-muted);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border-color: var(--borderColor-accent-muted);
 
   & .octicon {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent);
     margin-right: var(--base-size-12);
   }
 
@@ -63,7 +63,7 @@
 
   &.btn .octicon {
     margin-right: var(--control-small-gap);
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 
   &.btn-primary {
@@ -78,32 +78,32 @@
 /* Color variations */
 
 .flash-warn:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-  border-color: var(--color-attention-muted);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+  border-color: var(--borderColor-attention-muted);
 
   & .octicon {
-    color: var(--color-attention-fg);
+    color: var(--fgColor-attention);
   }
 }
 
 .flash-error:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-  border-color: var(--color-danger-muted);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+  border-color: var(--borderColor-danger-muted);
 
   & .octicon {
-    color: var(--color-danger-fg);
+    color: var(--fgColor-danger);
   }
 }
 
 .flash-success:not(.Banner) {
-  color: var(--color-fg-default);
-  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-  border-color: var(--color-success-muted);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+  border-color: var(--borderColor-success-muted);
 
   & .octicon {
-    color: var(--color-success-fg);
+    color: var(--fgColor-success);
   }
 }
 
@@ -130,7 +130,7 @@
 /* Makes sure the background is opaque to cover any content underneath */
 .flash-full,
 .flash-banner {
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default);
 }
 
 /* FIXME deprecate this */
@@ -138,5 +138,5 @@
   padding: 0.5em;
   margin-bottom: 0.8em;
   font-weight: var(--base-text-weight-semibold);
-  background-color: var(--color-attention-subtle);
+  background-color: var(--bgColor-attention-muted);
 }
diff --git a/app/components/primer/beta/label.pcss b/app/components/primer/beta/label.pcss
index 833f1b54e6..b9e387985c 100644
--- a/app/components/primer/beta/label.pcss
+++ b/app/components/primer/beta/label.pcss
@@ -15,7 +15,7 @@
   font-weight: var(--base-text-weight-medium);
   line-height: 18px;
   white-space: nowrap;
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: 2em;
 
   &:hover {
@@ -44,60 +44,60 @@
 /* Contrast */
 
 .Label--primary {
-  color: var(--color-fg-default);
-  border-color: var(--color-neutral-emphasis);
+  color: var(--fgColor-default);
+  border-color: var(--borderColor-neutral-emphasis);
 }
 
 .Label--secondary {
-  color: var(--color-fg-muted);
-  border-color: var(--color-border-default);
+  color: var(--fgColor-muted);
+  border-color: var(--borderColor-default);
 }
 
 /* Colors */
 
 .Label--info, /* TODO: deprecate */
 .Label--accent {
-  color: var(--color-accent-fg);
-  border-color: var(--color-accent-emphasis);
+  color: var(--fgColor-accent);
+  border-color: var(--borderColor-accent-emphasis);
 }
 
 .Label--success {
-  color: var(--color-success-fg);
-  border-color: var(--color-success-emphasis);
+  color: var(--fgColor-success);
+  border-color: var(--borderColor-success-emphasis);
 }
 
 .Label--warning, /* TODO: deprecate */
 .Label--attention {
-  color: var(--color-attention-fg);
-  border-color: var(--color-attention-emphasis);
+  color: var(--fgColor-attention);
+  border-color: var(--borderColor-attention-emphasis);
 }
 
 .Label--severe {
-  color: var(--color-severe-fg);
-  border-color: var(--color-severe-emphasis);
+  color: var(--fgColor-severe);
+  border-color: var(--borderColor-severe-emphasis);
 }
 
 .Label--danger {
-  color: var(--color-danger-fg);
-  border-color: var(--color-danger-emphasis);
+  color: var(--fgColor-danger);
+  border-color: var(--borderColor-danger-emphasis);
 }
 
 .Label--open {
-  color: var(--color-open-fg);
-  border-color: var(--color-open-emphasis);
+  color: var(--fgColor-open);
+  border-color: var(--borderColor-open-emphasis);
 }
 
 .Label--closed {
-  color: var(--color-closed-fg);
-  border-color: var(--color-closed-emphasis);
+  color: var(--fgColor-closed);
+  border-color: var(--borderColor-closed-emphasis);
 }
 
 .Label--done {
-  color: var(--color-done-fg);
-  border-color: var(--color-done-emphasis);
+  color: var(--fgColor-done);
+  border-color: var(--borderColor-done-emphasis);
 }
 
 .Label--sponsors {
-  color: var(--color-sponsors-fg);
-  border-color: var(--color-sponsors-emphasis);
+  color: var(--fgColor-sponsors);
+  border-color: var(--borderColor-sponsors-emphasis);
 }
diff --git a/app/components/primer/beta/link.pcss b/app/components/primer/beta/link.pcss
index 20c1c2b437..a73bb9fb03 100644
--- a/app/components/primer/beta/link.pcss
+++ b/app/components/primer/beta/link.pcss
@@ -1,7 +1,7 @@
 /* Links */
 
 .Link {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-link-rest);
 
   &:hover {
     text-decoration: underline;
@@ -15,26 +15,26 @@
 }
 
 .Link--primary {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default) !important;
 
   &:hover {
-    color: var(--color-accent-fg) !important;
+    color: var(--fgColor-link-rest) !important;
   }
 }
 
 .Link--secondary {
-  color: var(--color-fg-muted) !important;
+  color: var(--fgColor-muted) !important;
 
   &:hover {
-    color: var(--color-accent-fg) !important;
+    color: var(--fgColor-link-rest) !important;
   }
 }
 
 .Link--muted {
-  color: var(--color-fg-muted) !important;
+  color: var(--fgColor-muted) !important;
 
   &:hover {
-    color: var(--color-accent-fg) !important;
+    color: var(--fgColor-link-rest) !important;
     text-decoration: none;
   }
 }
@@ -43,7 +43,7 @@
    Useful when you want only part of a link to turn blue on hover */
 .Link--onHover {
   &:hover {
-    color: var(--color-accent-fg) !important;
+    color: var(--fgColor-link-rest) !important;
     text-decoration: underline;
     cursor: pointer;
   }
diff --git a/app/components/primer/beta/popover.pcss b/app/components/primer/beta/popover.pcss
index b26ed13e07..d203dbb48d 100644
--- a/app/components/primer/beta/popover.pcss
+++ b/app/components/primer/beta/popover.pcss
@@ -10,8 +10,8 @@
   width: 232px;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--color-canvas-overlay);
-  border: var(--borderWidth-thin) solid var(--color-border-default);
+  background-color: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
   border-radius: var(--borderRadius-medium);
 
   /* Carets */
@@ -27,14 +27,14 @@
     top: -16px;
     margin-left: -9px;
     border: 8px solid transparent;
-    border-bottom-color: var(--color-border-default);
+    border-bottom-color: var(--borderColor-default);
   }
 
   &::after {
     top: -14px;
     margin-left: -8px;
     border: 7px solid transparent;
-    border-bottom-color: var(--color-canvas-overlay);
+    border-bottom-color: var(--overlay-bgColor);
   }
 }
 
@@ -58,12 +58,12 @@
 
   &::before {
     bottom: -16px;
-    border-top-color: var(--color-border-default);
+    border-top-color: var(--borderColor-default);
   }
 
   &::after {
     bottom: -14px;
-    border-top-color: var(--color-canvas-overlay);
+    border-top-color: var(--overlay-bgColor);
   }
 }
 
@@ -135,12 +135,12 @@
 .Popover-message--right-bottom {
   &::before {
     right: -16px;
-    border-left-color: var(--color-border-default);
+    border-left-color: var(--borderColor-default);
   }
 
   &::after {
     right: -14px;
-    border-left-color: var(--color-canvas-overlay);
+    border-left-color: var(--overlay-bgColor);
   }
 }
 
@@ -150,12 +150,12 @@
 .Popover-message--left-bottom {
   &::before {
     left: -16px;
-    border-right-color: var(--color-border-default);
+    border-right-color: var(--borderColor-default);
   }
 
   &::after {
     left: -14px;
-    border-right-color: var(--color-canvas-overlay);
+    border-right-color: var(--overlay-bgColor);
   }
 }
 
diff --git a/app/components/primer/beta/progress_bar.pcss b/app/components/primer/beta/progress_bar.pcss
index 750ed39ae2..65ccad621f 100644
--- a/app/components/primer/beta/progress_bar.pcss
+++ b/app/components/primer/beta/progress_bar.pcss
@@ -4,7 +4,7 @@
   display: flex;
   height: 8px;
   overflow: hidden;
-  background-color: var(--color-neutral-muted);
+  background-color: var(--bgColor-neutral-muted);
   border-radius: 6px;
   outline: 1px solid transparent; /* Support Firefox custom colors */
 }
diff --git a/app/components/primer/beta/state.pcss b/app/components/primer/beta/state.pcss
index 632a9730bf..3ecfd97ce8 100644
--- a/app/components/primer/beta/state.pcss
+++ b/app/components/primer/beta/state.pcss
@@ -17,24 +17,24 @@
 .state, /* TODO: Deprecate */
 .State,
 .State--draft {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-neutral-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-neutral-emphasis);
   border: var(--borderWidth-thin) solid transparent;
 }
 
 .State--open {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-open-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-open-emphasis);
 }
 
 .State--merged {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-done-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-done-emphasis);
 }
 
 .State--closed {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-closed-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-closed-emphasis);
 }
 
 /* Small 24px */
diff --git a/app/components/primer/beta/subhead.pcss b/app/components/primer/beta/subhead.pcss
index b686200bf6..0046645a7b 100644
--- a/app/components/primer/beta/subhead.pcss
+++ b/app/components/primer/beta/subhead.pcss
@@ -4,7 +4,7 @@
   display: flex;
   padding-bottom: var(--stack-padding-condensed);
   margin-bottom: var(--stack-gap-normal);
-  border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
 }
@@ -25,13 +25,13 @@
 /* Make the text bold and red for dangerous content */
 .Subhead-heading--danger {
   font-weight: var(--base-text-weight-semibold);
-  color: var(--color-danger-fg);
+  color: var(--fgColor-danger);
 }
 
 /* One-liner of supporting text */
 .Subhead-description {
   font-size: var(--text-body-size-medium);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-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 890b5b8588..f278a3abf3 100644
--- a/app/components/primer/beta/timeline_item.pcss
+++ b/app/components/primer/beta/timeline_item.pcss
@@ -15,12 +15,12 @@
     display: block;
     width: var(--borderWidth-thick);
     content: '';
-    background-color: var(--color-border-muted);
+    background-color: var(--borderColor-muted);
   }
 
   &:target .TimelineItem-badge {
-    border-color: var(--color-accent-emphasis);
-    box-shadow: 0 0 0.2em var(--color-accent-muted);
+    border-color: var(--borderColor-accent-emphasis);
+    box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
   }
 }
 
@@ -32,18 +32,18 @@
   height: var(--control-medium-size);
   margin-right: var(--controlStack-medium-gap-condensed);
   margin-left: calc(var(--control-medium-size) / -2 + 1px);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   align-items: center;
-  background-color: var(--color-timeline-badge-bg);
-  border: var(--borderWidth-thick) solid var(--color-canvas-default);
+  background-color: var(--timelineBadge-bgColor);
+  border: var(--borderWidth-thick) solid var(--bgColor-default);
   border-radius: 50%;
   justify-content: center;
   flex-shrink: 0;
 }
 
 .TimelineItem-badge--success {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-success-emphasis);
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-success-emphasis);
   border: var(--borderWidth-thin) solid transparent;
 }
 
@@ -51,7 +51,7 @@
   min-width: 0;
   max-width: 100%;
   margin-top: var(--base-size-4);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
   flex: auto;
 }
 
@@ -68,9 +68,9 @@
   margin: 0;
   margin-bottom: calc(var(--stack-gap-normal) * -1);
   margin-left: -56px;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default);
   border: 0;
-  border-top: var(--borderWidth-thicker) solid var(--color-border-default);
+  border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
 }
 
 .TimelineItem--condensed {
@@ -86,8 +86,8 @@
     height: var(--base-size-16);
     margin-top: var(--base-size-8);
     margin-bottom: var(--base-size-8);
-    color: var(--color-fg-muted);
-    background-color: var(--color-canvas-default);
+    color: var(--fgColor-muted);
+    background-color: var(--bgColor-default);
     border: 0;
   }
 }
diff --git a/demo/package-lock.json b/demo/package-lock.json
index f5933379a7..2b31646288 100644
--- a/demo/package-lock.json
+++ b/demo/package-lock.json
@@ -9,7 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@primer/css": "^21.0.2",
-        "@primer/primitives": "7.11.11",
+        "@primer/primitives": "7.11.13",
         "@rails/actioncable": "^7.0.5",
         "@rails/ujs": "^7.0.5",
         "turbolinks": "^5.2.0",
@@ -163,9 +163,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g=="
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg=="
     },
     "node_modules/@primer/view-components": {
       "version": "0.1.4",
@@ -3202,9 +3202,9 @@
       }
     },
     "@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g=="
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg=="
     },
     "@primer/view-components": {
       "version": "0.1.4",
diff --git a/demo/package.json b/demo/package.json
index b52ee8edbe..c154c769d9 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@primer/css": "^21.0.2",
-    "@primer/primitives": "7.11.11",
+    "@primer/primitives": "7.11.13",
     "@rails/actioncable": "^7.0.5",
     "@rails/ujs": "^7.0.5",
     "turbolinks": "^5.2.0",
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 0cc49501cd..392ad0f8a1 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -12,7 +12,7 @@
         "@primer/css": "^21.0.2",
         "@primer/gatsby-theme-doctocat": "^4.4.2",
         "@primer/octicons-react": "^19.1.0",
-        "@primer/primitives": "^7.11.11",
+        "@primer/primitives": "^7.11.13",
         "@primer/react": "^35.25.1",
         "gatsby": "^2.24.63",
         "react": "^16.13.1",
@@ -2616,9 +2616,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g=="
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg=="
     },
     "node_modules/@primer/react": {
       "version": "35.25.1",
@@ -29710,9 +29710,9 @@
       "integrity": "sha512-owWS3jHcsMOQMRzXURSnbqkkQCgmNOZWmm/vejzwnPU21m8Wz1Xng5i0pu1B/VuW7cmsNh5+r5XsVM8r1igY6A=="
     },
     "@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g=="
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg=="
     },
     "@primer/react": {
       "version": "35.25.1",
diff --git a/docs/package.json b/docs/package.json
index d363c1b6e3..26512f3779 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,7 +15,7 @@
     "@primer/css": "^21.0.2",
     "@primer/gatsby-theme-doctocat": "^4.4.2",
     "@primer/octicons-react": "^19.1.0",
-    "@primer/primitives": "^7.11.11",
+    "@primer/primitives": "^7.11.13",
     "@primer/react": "^35.25.1",
     "gatsby": "^2.24.63",
     "react": "^16.13.1",
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 8071800d8f..d83e5946f4 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -4,11 +4,11 @@
   - title: Getting started
     url: "/"
   - title: Contributing
-    url: "https://github.com/primer/view_components/blob/main/docs/contributors/README.md"
+    url: https://github.com/primer/view_components/blob/main/docs/contributors/README.md
   - title: System arguments
     url: "/system-arguments"
   - title: Linting
-    url: "https://github.com/primer/view_components/blob/main/docs/contributors/linting.md"
+    url: https://github.com/primer/view_components/blob/main/docs/contributors/linting.md
   - title: Migration
     url: "/migration"
   - title: Component status
diff --git a/lib/postcss_mixins/activeIndicatorLine.pcss b/lib/postcss_mixins/activeIndicatorLine.pcss
index 5148b55c8d..4930521494 100644
--- a/lib/postcss_mixins/activeIndicatorLine.pcss
+++ b/lib/postcss_mixins/activeIndicatorLine.pcss
@@ -6,6 +6,6 @@
   width: var(--base-size-4);
   height: var(--base-size-24);
   content: '';
-  background: var(--color-accent-fg);
+  background: var(--borderColor-accent-emphasis);
   border-radius: var(--borderRadius-medium);
 }
diff --git a/lib/postcss_mixins/focusBoxShadowInset.pcss b/lib/postcss_mixins/focusBoxShadowInset.pcss
index a4bd1196b4..96ca9b3785 100644
--- a/lib/postcss_mixins/focusBoxShadowInset.pcss
+++ b/lib/postcss_mixins/focusBoxShadowInset.pcss
@@ -1,6 +1,6 @@
 /* inset box-shadow for form controls */
-@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {
-  border-color: var(--color-accent-fg);
+@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {
+  border-color: var(--focus-outlineColor);
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
diff --git a/lib/postcss_mixins/focusOutline.pcss b/lib/postcss_mixins/focusOutline.pcss
index 19a20b58e9..17dd2a18e4 100644
--- a/lib/postcss_mixins/focusOutline.pcss
+++ b/lib/postcss_mixins/focusOutline.pcss
@@ -1,4 +1,4 @@
-@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
diff --git a/lib/postcss_mixins/focusOutlineOnEmphasis.pcss b/lib/postcss_mixins/focusOutlineOnEmphasis.pcss
index dffda4da30..d640dd0664 100644
--- a/lib/postcss_mixins/focusOutlineOnEmphasis.pcss
+++ b/lib/postcss_mixins/focusOutlineOnEmphasis.pcss
@@ -1,6 +1,6 @@
 /* outline with fg box-shadow for buttons */
-@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
+@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
 }
diff --git a/lib/postcss_mixins/targetBoxShadow.pcss b/lib/postcss_mixins/targetBoxShadow.pcss
index fea094355b..ec790ad3d4 100644
--- a/lib/postcss_mixins/targetBoxShadow.pcss
+++ b/lib/postcss_mixins/targetBoxShadow.pcss
@@ -1,6 +1,6 @@
-/* box-shadow for :target styles (no inset) */
-/* !important to override PCSS utilities */
-@define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--color-accent-fg) {
+/* box-shadow for :target styles (no inset), !important to override PCSS utilities */
+
+@define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--focus-outlineColor) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
diff --git a/package-lock.json b/package-lock.json
index 223d3f21f6..f3f84ab204 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
         "@github/prettier-config": "0.0.4",
         "@playwright/test": "^1.27.1",
         "@primer/css": "21.0.2",
-        "@primer/primitives": "^7.11.11",
+        "@primer/primitives": "^7.11.13",
+        "@primer/stylelint-config": "^12.7.1",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.3",
         "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -1051,11 +1052,51 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==",
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg==",
       "dev": true
     },
+    "node_modules/@primer/stylelint-config": {
+      "version": "12.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-12.7.1.tgz",
+      "integrity": "sha512-jHuxjRpyZ0K02kwz+SUpw/cBMnU67AzPhC2FSj9dEq8hZTZHnyN2tN/CQk3C4I/5Mlgc8y1cl+x0FKXjO15dQQ==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "^3.1.1",
+        "globby": "^11.0.1",
+        "postcss-scss": "^4.0.2",
+        "postcss-value-parser": "^4.0.2",
+        "string.prototype.matchall": "^4.0.2",
+        "stylelint": "^14.8.0",
+        "stylelint-config-standard": "25.0.0",
+        "stylelint-no-unsupported-browser-features": "^5.0.1",
+        "stylelint-order": "^5.0.0",
+        "stylelint-scss": "^4.0.0",
+        "tap-map": "^1.0.0"
+      }
+    },
+    "node_modules/@primer/stylelint-config/node_modules/stylelint-config-recommended": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz",
+      "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==",
+      "dev": true,
+      "peerDependencies": {
+        "stylelint": "^14.4.0"
+      }
+    },
+    "node_modules/@primer/stylelint-config/node_modules/stylelint-config-standard": {
+      "version": "25.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-25.0.0.tgz",
+      "integrity": "sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^7.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.4.0"
+      }
+    },
     "node_modules/@primer/view-components": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@primer/view-components/-/view-components-0.1.6.tgz",
@@ -1186,6 +1227,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
+      "dev": true
+    },
     "node_modules/@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -1605,6 +1652,28 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/array-includes": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
@@ -1625,23 +1694,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/array-includes/node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -1731,6 +1783,18 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axe-core": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
@@ -2369,6 +2433,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
     "node_modules/cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -2476,6 +2546,43 @@
         "postcss": "^8.4"
       }
     },
+    "node_modules/css-rule-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-rule-stream/-/css-rule-stream-1.1.0.tgz",
+      "integrity": "sha512-qiio/Zkr8I19jh/XuzEkK8OKDQRTrEYaRyIHy4Bwh/tPUe0w8GcQs7r6x24Yc9lT+FbnZFYULxEIXCmaymguUQ==",
+      "dev": true,
+      "dependencies": {
+        "css-tokenize": "^1.0.1",
+        "duplexer2": "0.0.2",
+        "ldjson-stream": "^1.2.1",
+        "through2": "^0.6.3"
+      },
+      "bin": {
+        "css-rule-stream": "index.js"
+      }
+    },
+    "node_modules/css-rule-stream/node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/css-rule-stream/node_modules/through2": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+      "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": ">=1.0.33-1 <1.1.0-0",
+        "xtend": ">=4.0.0 <4.1.0-0"
+      }
+    },
     "node_modules/css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -2493,6 +2600,16 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-tokenize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
+      "integrity": "sha512-gLmmbJdwH9HLY4bcA17lnZ8GgPwEXRbvxBJGHnkiB6gLhRpTzjkjtMIvz7YORGW/Ptv2oMk8b5g+u7mRD6Dd7A==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^1.0.33"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -2764,16 +2881,19 @@
       }
     },
     "node_modules/define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/dependency-graph": {
@@ -2832,6 +2952,75 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/doiuse": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/doiuse/-/doiuse-4.4.1.tgz",
+      "integrity": "sha512-TUpr1/YNg20IB09tZmwGCTsTQoxj8jUld/hUZprZMj8vj0VpAJySXEWCr8WMvqvgzk0/kG/FxeSMGKode4UjPg==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.16.1",
+        "caniuse-lite": "^1.0.30001179",
+        "css-rule-stream": "^1.1.0",
+        "duplexer2": "0.0.2",
+        "ldjson-stream": "^1.2.1",
+        "multimatch": "^5.0.0",
+        "postcss": "^8.2.4",
+        "source-map": "^0.7.3",
+        "through2": "^4.0.2",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "doiuse": "cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/doiuse/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/doiuse/node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/doiuse/node_modules/yargs": {
+      "version": "16.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+      "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+      "dev": true,
+      "dependencies": {
+        "cliui": "^7.0.2",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^20.2.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/doiuse/node_modules/yargs-parser": {
+      "version": "20.2.9",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -2911,6 +3100,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/duplexer2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
+      "integrity": "sha512-+AWBwjGadtksxjOQSFDhPNQbed7icNXApT4+2BNpsXzcCBiInq2H9XW0O8sfHFaPmnQRs7cg/P0fAr2IWQSW0g==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "~1.1.9"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.222",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.222.tgz",
@@ -2962,35 +3160,45 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
+      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
+        "array-buffer-byte-length": "^1.0.0",
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.2.0",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.3",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -2999,6 +3207,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-shim-unscopables": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
@@ -3935,6 +4157,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -4025,15 +4256,15 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4174,6 +4405,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -4211,6 +4457,18 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -4281,6 +4539,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -4442,13 +4712,12 @@
       "license": "ISC"
     },
     "node_modules/internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
       },
@@ -4456,16 +4725,15 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/internal-slot/node_modules/get-intrinsic": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-      "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+    "node_modules/is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "function-bind": "^1.1.1",
-        "has": "^1.0.3",
-        "has-symbols": "^1.0.3"
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -4535,11 +4803,10 @@
       }
     },
     "node_modules/is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -4759,6 +5026,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -4807,6 +5093,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -4955,6 +5247,38 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "node_modules/ldjson-stream": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ldjson-stream/-/ldjson-stream-1.2.1.tgz",
+      "integrity": "sha512-xw/nNEXafuPSLu8NjjG3+atVVw+8U1APZAQylmwQn19Hgw6rC7QjHvP6MupnHWCrzSm9m0xs5QWkCLuRvBPjgQ==",
+      "dev": true,
+      "dependencies": {
+        "split2": "^0.2.1",
+        "through2": "^0.6.1"
+      }
+    },
+    "node_modules/ldjson-stream/node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/ldjson-stream/node_modules/through2": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+      "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": ">=1.0.33-1 <1.1.0-0",
+        "xtend": ">=4.0.0 <4.1.0-0"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5640,6 +5964,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "dev": true,
+      "dependencies": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/multimatch/node_modules/arrify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
@@ -5748,11 +6100,10 @@
       }
     },
     "node_modules/object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "dev": true,
-      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5768,15 +6119,14 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -6098,9 +6448,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
       "dev": true,
       "funding": [
         {
@@ -6110,11 +6460,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
-        }
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
       ],
-      "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -7348,6 +7701,28 @@
         "postcss": "^8.3.3"
       }
     },
+    "node_modules/postcss-scss": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
+      "integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss-scss"
+        }
+      ],
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.19"
+      }
+    },
     "node_modules/postcss-selector-not": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
@@ -7369,11 +7744,10 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7399,6 +7773,15 @@
         "postcss": "^8.2.1"
       }
     },
+    "node_modules/postcss-sorting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
+      "integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.3.9"
+      }
+    },
     "node_modules/postcss-svgo": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
@@ -7457,11 +7840,16 @@
       }
     },
     "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
       "dev": true,
-      "license": "MIT",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -7776,6 +8164,18 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -8026,6 +8426,20 @@
       ],
       "license": "MIT"
     },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -8350,6 +8764,37 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/split2": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-0.2.1.tgz",
+      "integrity": "sha512-D/oTExYAkC9nWleOCTOyNmAuzfAT/6rHGBA9LIK7FVnGo13CSvrKCUzKenwH6U1s2znY9MqH6v0UQTEDa3vJmg==",
+      "dev": true,
+      "dependencies": {
+        "through2": "~0.6.1"
+      }
+    },
+    "node_modules/split2/node_modules/readable-stream": {
+      "version": "1.0.34",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+      "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+      "dev": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/split2/node_modules/through2": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+      "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": ">=1.0.33-1 <1.1.0-0",
+        "xtend": ">=4.0.0 <4.1.0-0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -8374,6 +8819,12 @@
         "mixme": "^0.5.1"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+      "dev": true
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -8388,30 +8839,34 @@
         "node": ">=8"
       }
     },
-    "node_modules/string.prototype.trimend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string.prototype.trimend/node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -8420,33 +8875,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string.prototype.trimstart": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/string.prototype.trimstart/node_modules/define-properties": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
-        "has-property-descriptors": "^1.0.0",
-        "object-keys": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8616,6 +9067,51 @@
         "stylelint": "^14.11.0"
       }
     },
+    "node_modules/stylelint-no-unsupported-browser-features": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-5.0.4.tgz",
+      "integrity": "sha512-05DeIsWv262DXTSWhbQURDOxno9Tsu81sNnOpG1gD39WT+NNsEjhR2BQvwvNpZ/J/lS8vHxjhHULU2OGKSswvA==",
+      "dev": true,
+      "dependencies": {
+        "doiuse": "^4.4.1",
+        "lodash": "^4.17.15",
+        "postcss": "^8.4.16"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "stylelint": ">=13.0.0"
+      }
+    },
+    "node_modules/stylelint-order": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
+      "integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^8.3.11",
+        "postcss-sorting": "^7.0.1"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.0.0"
+      }
+    },
+    "node_modules/stylelint-scss": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
+      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.5.1 || ^15.0.0"
+      }
+    },
     "node_modules/stylelint/node_modules/balanced-match": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
@@ -8854,6 +9350,12 @@
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
       "dev": true
     },
+    "node_modules/tap-map": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tap-map/-/tap-map-1.0.0.tgz",
+      "integrity": "sha512-qYUKYf/zPDpj9xL8eb3mBcGN+8qHcW4Yvem02SapcBZAw9PQHHrozIu+bma3o5MdDbcmgKK88hv5rCTGR8RZfA==",
+      "dev": true
+    },
     "node_modules/term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -8916,6 +9418,38 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "dependencies": {
+        "readable-stream": "3"
+      }
+    },
+    "node_modules/through2/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/through2/node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -9067,6 +9601,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/typescript": {
       "version": "4.7.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
@@ -9272,6 +9820,26 @@
         "node": ">=8.15"
       }
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dev": true,
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -9327,6 +9895,15 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
@@ -10187,10 +10764,47 @@
       }
     },
     "@primer/primitives": {
-      "version": "7.11.11",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.11.tgz",
-      "integrity": "sha512-5McPeE83AGcYm2uHbQEIOOa6JPv2SUFPDjYbf2I5QnvmNm9ZUbS446zWC3ygNi54uks7znuTDFrU325vpnze7g==",
-      "dev": true
+      "version": "7.11.13",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.13.tgz",
+      "integrity": "sha512-W3RtWXpVmXqD/+6MBJG/5wJzDzY80BvUhp8HrbRK0vg83F9i+VDaQ1CiCeVn3fFuTH8HZxoJeSlhwKOHUtorWg==",
+      "dev": true
+    },
+    "@primer/stylelint-config": {
+      "version": "12.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/stylelint-config/-/stylelint-config-12.7.1.tgz",
+      "integrity": "sha512-jHuxjRpyZ0K02kwz+SUpw/cBMnU67AzPhC2FSj9dEq8hZTZHnyN2tN/CQk3C4I/5Mlgc8y1cl+x0FKXjO15dQQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "^3.1.1",
+        "globby": "^11.0.1",
+        "postcss-scss": "^4.0.2",
+        "postcss-value-parser": "^4.0.2",
+        "string.prototype.matchall": "^4.0.2",
+        "stylelint": "^14.8.0",
+        "stylelint-config-standard": "25.0.0",
+        "stylelint-no-unsupported-browser-features": "^5.0.1",
+        "stylelint-order": "^5.0.0",
+        "stylelint-scss": "^4.0.0",
+        "tap-map": "^1.0.0"
+      },
+      "dependencies": {
+        "stylelint-config-recommended": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz",
+          "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==",
+          "dev": true,
+          "requires": {}
+        },
+        "stylelint-config-standard": {
+          "version": "25.0.0",
+          "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-25.0.0.tgz",
+          "integrity": "sha512-21HnP3VSpaT1wFjFvv9VjvOGDtAviv47uTp3uFmzcN+3Lt+RYRv6oAplLaV51Kf792JSxJ6svCJh/G18E9VnCA==",
+          "dev": true,
+          "requires": {
+            "stylelint-config-recommended": "^7.0.0"
+          }
+        }
+      }
     },
     "@primer/view-components": {
       "version": "0.1.6",
@@ -10288,6 +10902,12 @@
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=",
       "dev": true
     },
+    "@types/minimatch": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
+      "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==",
+      "dev": true
+    },
     "@types/minimist": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
@@ -10551,6 +11171,22 @@
         }
       }
     },
+    "array-buffer-byte-length": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
+      "integrity": "sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "is-array-buffer": "^3.0.1"
+      }
+    },
+    "array-differ": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
+      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
+      "dev": true
+    },
     "array-includes": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
@@ -10562,18 +11198,6 @@
         "es-abstract": "^1.19.5",
         "get-intrinsic": "^1.1.1",
         "is-string": "^1.0.7"
-      },
-      "dependencies": {
-        "define-properties": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-          "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-          "dev": true,
-          "requires": {
-            "has-property-descriptors": "^1.0.0",
-            "object-keys": "^1.1.1"
-          }
-        }
       }
     },
     "array-union": {
@@ -10626,6 +11250,12 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "dev": true
+    },
     "axe-core": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.1.tgz",
@@ -11077,6 +11707,12 @@
       "integrity": "sha512-uzMmW8cRh7uYw4JQtzqvGWRyC2T5+4zipQLQdi2FmiRqP83k3d6F3stv2iAlNhOs6cXN401FCD5TL0vvleuHgA==",
       "dev": true
     },
+    "core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true
+    },
     "cosmiconfig": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
@@ -11139,6 +11775,42 @@
       "dev": true,
       "requires": {}
     },
+    "css-rule-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/css-rule-stream/-/css-rule-stream-1.1.0.tgz",
+      "integrity": "sha512-qiio/Zkr8I19jh/XuzEkK8OKDQRTrEYaRyIHy4Bwh/tPUe0w8GcQs7r6x24Yc9lT+FbnZFYULxEIXCmaymguUQ==",
+      "dev": true,
+      "requires": {
+        "css-tokenize": "^1.0.1",
+        "duplexer2": "0.0.2",
+        "ldjson-stream": "^1.2.1",
+        "through2": "^0.6.3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+          "dev": true,
+          "requires": {
+            "readable-stream": ">=1.0.33-1 <1.1.0-0",
+            "xtend": ">=4.0.0 <4.1.0-0"
+          }
+        }
+      }
+    },
     "css-select": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz",
@@ -11152,6 +11824,16 @@
         "nth-check": "^2.0.1"
       }
     },
+    "css-tokenize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/css-tokenize/-/css-tokenize-1.0.1.tgz",
+      "integrity": "sha512-gLmmbJdwH9HLY4bcA17lnZ8GgPwEXRbvxBJGHnkiB6gLhRpTzjkjtMIvz7YORGW/Ptv2oMk8b5g+u7mRD6Dd7A==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^1.0.33"
+      }
+    },
     "css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -11341,12 +12023,13 @@
       }
     },
     "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
+      "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
       "dev": true,
       "requires": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       }
     },
     "dependency-graph": {
@@ -11385,6 +12068,59 @@
         "esutils": "^2.0.2"
       }
     },
+    "doiuse": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/doiuse/-/doiuse-4.4.1.tgz",
+      "integrity": "sha512-TUpr1/YNg20IB09tZmwGCTsTQoxj8jUld/hUZprZMj8vj0VpAJySXEWCr8WMvqvgzk0/kG/FxeSMGKode4UjPg==",
+      "dev": true,
+      "requires": {
+        "browserslist": "^4.16.1",
+        "caniuse-lite": "^1.0.30001179",
+        "css-rule-stream": "^1.1.0",
+        "duplexer2": "0.0.2",
+        "ldjson-stream": "^1.2.1",
+        "multimatch": "^5.0.0",
+        "postcss": "^8.2.4",
+        "source-map": "^0.7.3",
+        "through2": "^4.0.2",
+        "yargs": "^16.2.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        },
+        "y18n": {
+          "version": "5.0.8",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+          "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+          "dev": true
+        },
+        "yargs": {
+          "version": "16.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
+          "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==",
+          "dev": true,
+          "requires": {
+            "cliui": "^7.0.2",
+            "escalade": "^3.1.1",
+            "get-caller-file": "^2.0.5",
+            "require-directory": "^2.1.1",
+            "string-width": "^4.2.0",
+            "y18n": "^5.0.5",
+            "yargs-parser": "^20.2.2"
+          }
+        },
+        "yargs-parser": {
+          "version": "20.2.9",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+          "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+          "dev": true
+        }
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -11436,6 +12172,15 @@
       "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
       "dev": true
     },
+    "duplexer2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.0.2.tgz",
+      "integrity": "sha512-+AWBwjGadtksxjOQSFDhPNQbed7icNXApT4+2BNpsXzcCBiInq2H9XW0O8sfHFaPmnQRs7cg/P0fAr2IWQSW0g==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "~1.1.9"
+      }
+    },
     "electron-to-chromium": {
       "version": "1.4.222",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.222.tgz",
@@ -11473,34 +12218,56 @@
       }
     },
     "es-abstract": {
-      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
-      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "version": "1.21.2",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.21.2.tgz",
+      "integrity": "sha512-y/B5POM2iBnIxCiernH1G7rC9qQoM77lLIMQLuob0zhp8C56Po81+2Nj0WFKnd0pNReDTnkYryc+zhOzpEIROg==",
       "dev": true,
       "requires": {
+        "array-buffer-byte-length": "^1.0.0",
+        "available-typed-arrays": "^1.0.5",
         "call-bind": "^1.0.2",
+        "es-set-tostringtag": "^2.0.1",
         "es-to-primitive": "^1.2.1",
-        "function-bind": "^1.1.1",
         "function.prototype.name": "^1.1.5",
-        "get-intrinsic": "^1.1.1",
+        "get-intrinsic": "^1.2.0",
         "get-symbol-description": "^1.0.0",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
         "has": "^1.0.3",
         "has-property-descriptors": "^1.0.0",
+        "has-proto": "^1.0.1",
         "has-symbols": "^1.0.3",
-        "internal-slot": "^1.0.3",
-        "is-callable": "^1.2.4",
+        "internal-slot": "^1.0.5",
+        "is-array-buffer": "^3.0.2",
+        "is-callable": "^1.2.7",
         "is-negative-zero": "^2.0.2",
         "is-regex": "^1.1.4",
         "is-shared-array-buffer": "^1.0.2",
         "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.10",
         "is-weakref": "^1.0.2",
-        "object-inspect": "^1.12.0",
+        "object-inspect": "^1.12.3",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.2",
+        "object.assign": "^4.1.4",
         "regexp.prototype.flags": "^1.4.3",
-        "string.prototype.trimend": "^1.0.5",
-        "string.prototype.trimstart": "^1.0.5",
-        "unbox-primitive": "^1.0.2"
+        "safe-regex-test": "^1.0.0",
+        "string.prototype.trim": "^1.2.7",
+        "string.prototype.trimend": "^1.0.6",
+        "string.prototype.trimstart": "^1.0.6",
+        "typed-array-length": "^1.0.4",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.9"
+      }
+    },
+    "es-set-tostringtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz",
+      "integrity": "sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3",
+        "has": "^1.0.3",
+        "has-tostringtag": "^1.0.0"
       }
     },
     "es-shim-unscopables": {
@@ -12162,6 +12929,15 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -12222,14 +12998,15 @@
       "dev": true
     },
     "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
+      "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
       "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
-        "has-symbols": "^1.0.1"
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3"
       }
     },
     "get-stdin": {
@@ -12325,6 +13102,15 @@
         }
       }
     },
+    "globalthis": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
+      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3"
+      }
+    },
     "globby": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
@@ -12353,6 +13139,15 @@
       "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
       "dev": true
     },
+    "gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.3"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -12401,6 +13196,12 @@
         "get-intrinsic": "^1.1.1"
       }
     },
+    "has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "dev": true
+    },
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
@@ -12508,27 +13309,25 @@
       "dev": true
     },
     "internal-slot": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
-      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz",
+      "integrity": "sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.1.0",
+        "get-intrinsic": "^1.2.0",
         "has": "^1.0.3",
         "side-channel": "^1.0.4"
-      },
-      "dependencies": {
-        "get-intrinsic": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
-          "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-          "dev": true,
-          "requires": {
-            "function-bind": "^1.1.1",
-            "has": "^1.0.3",
-            "has-symbols": "^1.0.3"
-          }
-        }
+      }
+    },
+    "is-array-buffer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
+      "integrity": "sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.0",
+        "is-typed-array": "^1.1.10"
       }
     },
     "is-arrayish": {
@@ -12575,9 +13374,9 @@
       }
     },
     "is-callable": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true
     },
     "is-ci": {
@@ -12710,6 +13509,19 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.10.tgz",
+      "integrity": "sha512-PJqgEHiWZvMpaFZ3uTc8kHPM4+4ADTlDniuQL7cU/UDA0Ql7F70yGfHph3cLNe+c9toaigv+DFzTJKhc2CtO6A==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -12737,6 +13549,12 @@
       "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
       "dev": true
     },
+    "isarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+      "dev": true
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -12854,6 +13672,40 @@
         "language-subtag-registry": "~0.3.2"
       }
     },
+    "ldjson-stream": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ldjson-stream/-/ldjson-stream-1.2.1.tgz",
+      "integrity": "sha512-xw/nNEXafuPSLu8NjjG3+atVVw+8U1APZAQylmwQn19Hgw6rC7QjHvP6MupnHWCrzSm9m0xs5QWkCLuRvBPjgQ==",
+      "dev": true,
+      "requires": {
+        "split2": "^0.2.1",
+        "through2": "^0.6.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+          "dev": true,
+          "requires": {
+            "readable-stream": ">=1.0.33-1 <1.1.0-0",
+            "xtend": ">=4.0.0 <4.1.0-0"
+          }
+        }
+      }
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -13349,6 +14201,27 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "multimatch": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-5.0.0.tgz",
+      "integrity": "sha512-ypMKuglUrZUD99Tk2bUQ+xNQj43lPEfAeX2o9cTteAmShXy2VHDJpuwu1o0xqoKCt9jLVAvwyFKdLTPXKAfJyA==",
+      "dev": true,
+      "requires": {
+        "@types/minimatch": "^3.0.3",
+        "array-differ": "^3.0.0",
+        "array-union": "^2.1.0",
+        "arrify": "^2.0.1",
+        "minimatch": "^3.0.4"
+      },
+      "dependencies": {
+        "arrify": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+          "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
+          "dev": true
+        }
+      }
+    },
     "nanoid": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz",
@@ -13416,9 +14289,9 @@
       }
     },
     "object-inspect": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
       "dev": true
     },
     "object-keys": {
@@ -13428,14 +14301,14 @@
       "dev": true
     },
     "object.assign": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "version": "4.1.4",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz",
+      "integrity": "sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.0",
-        "define-properties": "^1.1.3",
-        "has-symbols": "^1.0.1",
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "has-symbols": "^1.0.3",
         "object-keys": "^1.1.1"
       }
     },
@@ -13646,20 +14519,20 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.4.16",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
-      "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
+      "version": "8.4.24",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz",
+      "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==",
       "dev": true,
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
       "dependencies": {
         "nanoid": {
-          "version": "3.3.4",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+          "version": "3.3.6",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+          "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
           "dev": true
         }
       }
@@ -14360,6 +15233,13 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-scss": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-4.0.6.tgz",
+      "integrity": "sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-selector-not": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz",
@@ -14370,9 +15250,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
@@ -14386,6 +15266,13 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-sorting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
+      "integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
+      "dev": true,
+      "requires": {}
+    },
     "postcss-svgo": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.1.0.tgz",
@@ -14628,6 +15515,18 @@
         }
       }
     },
+    "readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
     "readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -14782,6 +15681,17 @@
       "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
       "dev": true
     },
+    "safe-regex-test": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz",
+      "integrity": "sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.3",
+        "is-regex": "^1.1.4"
+      }
+    },
     "safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -15032,6 +15942,39 @@
       "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==",
       "dev": true
     },
+    "split2": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/split2/-/split2-0.2.1.tgz",
+      "integrity": "sha512-D/oTExYAkC9nWleOCTOyNmAuzfAT/6rHGBA9LIK7FVnGo13CSvrKCUzKenwH6U1s2znY9MqH6v0UQTEDa3vJmg==",
+      "dev": true,
+      "requires": {
+        "through2": "~0.6.1"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==",
+          "dev": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "through2": {
+          "version": "0.6.5",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
+          "integrity": "sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==",
+          "dev": true,
+          "requires": {
+            "readable-stream": ">=1.0.33-1 <1.1.0-0",
+            "xtend": ">=4.0.0 <4.1.0-0"
+          }
+        }
+      }
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -15053,6 +15996,12 @@
         "mixme": "^0.5.1"
       }
     },
+    "string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+      "dev": true
+    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -15064,50 +16013,53 @@
         "strip-ansi": "^6.0.1"
       }
     },
+    "string.prototype.matchall": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.7.tgz",
+      "integrity": "sha512-p6TmeT1T3411M8Cgg9wBTMRtY2q9+PNy9EV1i2lIXUN/btt763oIfxwN3RR8VU6wHX8j/1CFy0L+YuThm6bgOg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
     "string.prototype.trimend": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
-      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.6.tgz",
+      "integrity": "sha512-JySq+4mrPf9EsDBEDYMOb/lM7XQLulwg5R/m1r0PXEFqrV0qHvl58sdTilSXtKOflCsK2E8jxf+GKC0T07RWwQ==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
-      },
-      "dependencies": {
-        "define-properties": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-          "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-          "dev": true,
-          "requires": {
-            "has-property-descriptors": "^1.0.0",
-            "object-keys": "^1.1.1"
-          }
-        }
+        "es-abstract": "^1.20.4"
       }
     },
     "string.prototype.trimstart": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
-      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.6.tgz",
+      "integrity": "sha512-omqjMDaY92pbn5HOX7f9IccLA+U1tA9GvtU4JrodiXFfYB7jPzzHpRzpglLAjtUV6bB557zwClJezTqnAiYnQA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
-        "es-abstract": "^1.19.5"
-      },
-      "dependencies": {
-        "define-properties": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
-          "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-          "dev": true,
-          "requires": {
-            "has-property-descriptors": "^1.0.0",
-            "object-keys": "^1.1.1"
-          }
-        }
+        "es-abstract": "^1.20.4"
       }
     },
     "strip-ansi": {
@@ -15295,6 +16247,39 @@
         "stylelint-config-recommended": "^9.0.0"
       }
     },
+    "stylelint-no-unsupported-browser-features": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-5.0.4.tgz",
+      "integrity": "sha512-05DeIsWv262DXTSWhbQURDOxno9Tsu81sNnOpG1gD39WT+NNsEjhR2BQvwvNpZ/J/lS8vHxjhHULU2OGKSswvA==",
+      "dev": true,
+      "requires": {
+        "doiuse": "^4.4.1",
+        "lodash": "^4.17.15",
+        "postcss": "^8.4.16"
+      }
+    },
+    "stylelint-order": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
+      "integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^8.3.11",
+        "postcss-sorting": "^7.0.1"
+      }
+    },
+    "stylelint-scss": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
+      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
+      "dev": true,
+      "requires": {
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
+      }
+    },
     "sugarss": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
@@ -15395,6 +16380,12 @@
         }
       }
     },
+    "tap-map": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tap-map/-/tap-map-1.0.0.tgz",
+      "integrity": "sha512-qYUKYf/zPDpj9xL8eb3mBcGN+8qHcW4Yvem02SapcBZAw9PQHHrozIu+bma3o5MdDbcmgKK88hv5rCTGR8RZfA==",
+      "dev": true
+    },
     "term-size": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
@@ -15438,6 +16429,37 @@
       "integrity": "sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==",
       "dev": true
     },
+    "through2": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-4.0.2.tgz",
+      "integrity": "sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw==",
+      "dev": true,
+      "requires": {
+        "readable-stream": "3"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+          "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+          "dev": true,
+          "requires": {
+            "safe-buffer": "~5.2.0"
+          }
+        }
+      }
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -15545,6 +16567,17 @@
       "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
       "dev": true
     },
+    "typed-array-length": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.4.tgz",
+      "integrity": "sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "typescript": {
       "version": "4.7.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.4.tgz",
@@ -15690,6 +16723,20 @@
         "path-exists": "^4.0.0"
       }
     },
+    "which-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.9.tgz",
+      "integrity": "sha512-w9c4xkx6mPidwp7180ckYWfMmvxpjlZuIudNtDf4N/tTAUB8VJbX25qZoAsrtGuYNnGw3pa0AXgbGKRB8/EceA==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.10"
+      }
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
@@ -15729,6 +16776,12 @@
         "signal-exit": "^3.0.7"
       }
     },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "dev": true
+    },
     "y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
diff --git a/package.json b/package.json
index a656555f4f..17bcd5a5a0 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "@github/prettier-config": "0.0.4",
     "@playwright/test": "^1.27.1",
     "@primer/css": "21.0.2",
-    "@primer/primitives": "^7.11.11",
+    "@primer/primitives": "^7.11.13",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -92,6 +92,7 @@
     "stylelint": "^14.13.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^28.0.0",
+    "@primer/stylelint-config": "^12.7.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4"
   },
diff --git a/test/css/css_var_fallback_test.rb b/test/css/css_var_fallback_test.rb
new file mode 100644
index 0000000000..0fb94d8ca9
--- /dev/null
+++ b/test/css/css_var_fallback_test.rb
@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class Primer::CssVariableTest < Minitest::Test
+  class CssFile
+    attr_reader :path
+
+    def initialize(path)
+      @path = path
+    end
+
+    def contents
+      @contents ||= File.read(path)
+    end
+
+    def find_offset(pos)
+      line_idx = line_ranges.bsearch_index do |range|
+        if pos < range.first
+          -1
+        elsif pos > range.last
+          1
+        else
+          0
+        end
+      end
+
+      return unless line_idx
+
+      line_range = line_ranges[line_idx]
+      [line_idx + 1, pos - line_range.first]
+    end
+
+    private
+
+    def line_ranges
+      @line_ranges ||= [].tap do |ranges|
+        idx = 0
+
+        loop do
+          next_idx = contents.index("\n", idx)
+          break unless next_idx
+
+          ranges << (idx..next_idx)
+          idx = next_idx + 1
+        end
+      end
+    end
+  end
+
+  def test_css_rules_all_contain_fallbacks
+    # 1. Find compiled CSS file
+    css_file = CssFile.new(
+      Rails.root.join(*%w[.. app assets styles primer_view_components.css]).to_s
+    )
+
+    # 2. Load file and run regex on it which checks for any CSS var containing new color terms
+    regex = /var\(--(shadow|borderColor|bgColor|fgColor|iconColor)[^),]*\)\s*(,|;|\s)/
+
+    missing = [].tap do |results|
+      css_file.contents.scan(regex) do
+        start_pos, = Regexp.last_match.offset(0)
+        line, col = css_file.find_offset(start_pos)
+        source_file = Pathname(css_file.path).relative_path_from(Rails.root.join(".."))
+        results << "#{source_file}:#{line}:#{col}"
+      end
+    end
+
+    missing.uniq!
+
+    # 3. Use assert method (and friends) to verify it works
+    assert_equal 0, missing.length, "The CSS variables in the following files are missing fallbacks:\n  #{missing.join("\n  ")}"
+  end
+end