From cb7a68284920fffc864ab81e3301d2fd552051ec Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Thu, 20 Apr 2023 08:40:47 -0700
Subject: [PATCH 1/3] run lint

---
 .../components/Layout/Stack.stories.jsx       |  14 +-
 package.json                                  |   4 +-
 src/autocomplete/suggester.scss               |  22 ++--
 src/avatars/avatar-parent-child.scss          |   4 +-
 src/avatars/circle-badge.scss                 |   6 +-
 src/base/base.scss                            |  10 +-
 src/base/kbd.scss                             |   8 +-
 src/box/box-overlay.scss                      |   6 +-
 src/branch-name/branch-name.scss              |  12 +-
 src/buttons/button.scss                       | 124 +++++++++---------
 src/buttons/misc.scss                         |  48 +++----
 src/color-modes/native.scss                   |   4 +-
 src/forms/form-control.scss                   |  34 ++---
 src/forms/form-group.scss                     |  52 ++++----
 src/forms/form-select.scss                    |   2 +-
 src/forms/radio-group.scss                    |  12 +-
 src/header/header.scss                        |  14 +-
 src/layout/app-frame.scss                     |  20 +--
 src/layout/page-layout.scss                   |   2 +-
 src/layout/stack.scss                         |  12 +-
 src/markdown/blob-csv.scss                    |   4 +-
 src/markdown/code.scss                        |   4 +-
 src/markdown/footnotes.scss                   |   6 +-
 src/markdown/headings.scss                    |   8 +-
 src/markdown/images.scss                      |   6 +-
 src/markdown/markdown-body.scss               |   6 +-
 src/markdown/tables.scss                      |   8 +-
 src/navigation/filter-list.scss               |  16 +--
 src/navigation/sidenav.scss                   |  20 +--
 src/navigation/subnav.scss                    |  18 +--
 src/pagination/pagination.scss                |  14 +-
 src/select-menu/select-menu.scss              |  74 +++++------
 src/support/variables/misc.scss               |   4 +-
 src/toasts/toasts.scss                        |  34 ++---
 src/tooltips/tooltips.scss                    |   4 +-
 src/utilities/borders.scss                    |  16 +--
 src/utilities/box-shadow.scss                 |   8 +-
 src/utilities/colors.scss                     | 118 ++++++++---------
 src/utilities/details.scss                    |   2 +-
 yarn.lock                                     |  19 ++-
 40 files changed, 399 insertions(+), 400 deletions(-)

diff --git a/docs/src/stories/components/Layout/Stack.stories.jsx b/docs/src/stories/components/Layout/Stack.stories.jsx
index 93203448db..396932488d 100644
--- a/docs/src/stories/components/Layout/Stack.stories.jsx
+++ b/docs/src/stories/components/Layout/Stack.stories.jsx
@@ -58,9 +58,9 @@ export default {
       },
       description: `Sets the spacing gap between items. All sizes are rendered in \`rem\` units.
 - \`none\`: 0
-- \`condensed\`: \`var(--primer-stack-gap-condensed, 8px)\`,
-- \`normal\`: \`var(--primer-stack-gap-normal, 16px)\` (default)
-- \`spacious\`: \`var(--primer-stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
+- \`condensed\`: \`var(--stack-gap-condensed, 8px)\`,
+- \`normal\`: \`var(--stack-gap-normal, 16px)\` (default)
+- \`spacious\`: \`var(--stack-gap-spacious, 24px)\` (on regular viewports, otherwise it appears as \`normal\` on narrow viewports)
 <!-- - \`custom\`: set a custom size. When using with a framework such as ViewComponent or React, a custom value can be passed directly to the property. -->
  `,
       table: {
@@ -120,7 +120,7 @@ This property behavior is equivalent to the \`align-items\` Flexbox property.`,
       control: {
         type: 'inline-radio',
       },
-      description: 'Sets how items will be distributed in the stacking direction.', 
+      description: 'Sets how items will be distributed in the stacking direction.',
       table: {
         category: 'Properties',
         defaultValue: {
@@ -514,7 +514,7 @@ export const StackTemplate = ({
           alignWrap && 'Stack--alignWrap-' + `${alignWrap}-whenRegular`,
           narrow_alignWrap && 'Stack--alignWrap-' + `${narrow_alignWrap}-whenNarrow`,
           wide_alignWrap && 'Stack--alignWrap-' + `${wide_alignWrap}-whenWide`,
-          
+
           spread && 'Stack--spread-' + `${spread}-whenRegular`,
           narrow_spread && 'Stack--spread-' + `${narrow_spread}-whenNarrow`,
           wide_spread && 'Stack--spread-' + `${wide_spread}-whenWide`,
@@ -531,7 +531,7 @@ export const StackTemplate = ({
         //style={custom_styles}
       >
         {children}
-        
+
         {!children && (
           <>
             <div className="Stack-item _debug _debug-item-1">1</div>
@@ -604,4 +604,4 @@ Playground.args = {
   direction: "block",
   gap: "normal",
   align: "stretch",
-};
\ No newline at end of file
+};
diff --git a/package.json b/package.json
index 343e02e44c..38ad0039ee 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.11.5",
+    "@primer/primitives": "^7.11.7",
     "@primer/view-components": "^0.1.0"
   },
   "devDependencies": {
@@ -50,7 +50,7 @@
     "@changesets/cli": "2.26.1",
     "@github/prettier-config": "0.0.6",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "^12.4.0",
+    "@primer/stylelint-config": "0.0.0-20230420153251",
     "autoprefixer": "10.4.13",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index 87baf4dd9c..a7f61e0f96 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -11,20 +11,20 @@
   margin-top: $spacer-4;
   list-style: none;
   cursor: pointer;
-  background: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-border-default);
+  background: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
   border-radius: $border-radius;
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 
   li {
     display: block;
     padding: $spacer-1 $spacer-2;
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--color-fg-muted);
+      color: var(--fgColor-muted, var(--color-fg-muted));
     }
 
     &:last-child {
@@ -39,12 +39,12 @@
     }
 
     &:hover {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
 
       .octicon {
@@ -54,12 +54,12 @@
 
     &[aria-selected='true'],
     &.navigation-focus {
-      color: var(--color-fg-on-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       text-decoration: none;
-      background: var(--color-accent-emphasis);
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
       small {
-        color: var(--color-fg-on-emphasis);
+        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
       }
 
       .octicon {
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
index e3185f8068..01a5c7127e 100644
--- a/src/avatars/avatar-parent-child.scss
+++ b/src/avatars/avatar-parent-child.scss
@@ -10,8 +10,8 @@
   position: absolute;
   right: -15%;
   bottom: -9%;
-  background-color: var(--color-canvas-default); // For transparent backgrounds
+  background-color: var(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
-  box-shadow: var(--color-avatar-child-shadow);
+  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
index 657bbc931a..63032cfb63 100644
--- a/src/avatars/circle-badge.scss
+++ b/src/avatars/circle-badge.scss
@@ -4,9 +4,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: 50%;
-  box-shadow: var(--color-shadow-medium);
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
 }
 
 .CircleBadge-icon {
@@ -46,7 +46,7 @@
     width: 100%;
     content: '';
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--color-border-default);
+    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
   }
 
   .CircleBadge {
diff --git a/src/base/base.scss b/src/base/base.scss
index c12269ed19..dbf662b2c2 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 a {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
 
   &:hover {
@@ -46,7 +46,7 @@ label {
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--color-fg-subtle);
+  color: var(--fgColor-muted, var(--color-fg-subtle));
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -61,7 +61,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include clearfix();
 }
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
index f6801b920d..0905245406 100644
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@@ -7,12 +7,12 @@ kbd {
   font: 11px $mono-font;
   // stylelint-disable-next-line primer/typography
   line-height: 10px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   // stylelint-disable-next-line primer/borders
-  border: $border-style $border-width var(--color-neutral-muted);
-  border-bottom-color: var(--color-neutral-muted);
+  border: $border-style $border-width var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  border-bottom-color: var(--borderColor-neutral-muted, var(--color-neutral-muted));
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: inset 0 -1px 0 var(--color-neutral-muted);
diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss
index ed8f273364..5a82a501be 100644
--- a/src/box/box-overlay.scss
+++ b/src/box/box-overlay.scss
@@ -3,9 +3,9 @@
   width: 448px;
   margin-right: auto;
   margin-left: auto;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   background-clip: padding-box;
-  border-color: var(--color-border-default);
+  border-color: var(--borderColor-default, var(--color-border-default));
   // stylelint-disable-next-line primer/box-shadow
   box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
 
@@ -36,7 +36,7 @@
   .help {
     padding-top: $spacer-2;
     margin: 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     text-align: center;
   }
 }
diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss
index 600e99b8a9..c18c746e50 100644
--- a/src/branch-name/branch-name.scss
+++ b/src/branch-name/branch-name.scss
@@ -7,25 +7,25 @@
   // stylelint-disable-next-line primer/spacing
   padding: 2px 6px;
   font: 12px $mono-font;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   word-break: break-all;
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
   border-radius: $border-radius;
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 }
 
 // When a branch name is a link
 
 a.branch-name {
-  color: var(--color-accent-fg);
-  background-color: var(--color-accent-subtle);
+  color: var(--fgColor-accent, var(--color-accent-fg));
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
 
   .octicon {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index 27563db247..d1c9dd55f2 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -36,7 +36,7 @@
 
   .octicon {
     margin-right: $spacer-1;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     vertical-align: text-bottom;
 
     &:only-child {
@@ -50,7 +50,7 @@
     color: inherit;
     text-shadow: none;
     vertical-align: top;
-    background-color: var(--color-btn-counter-bg);
+    background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
   }
 
   .dropdown-caret {
@@ -63,41 +63,41 @@
 
 .btn {
   color: var(--color-btn-text);
-  background-color: var(--color-btn-bg);
-  border-color: var(--color-btn-border);
-  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+  background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
+  border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
+  box-shadow: var(--button-default-shadow-resting, var(--color-btn-shadow)), var(--button-default-shadow-inset, var(--color-btn-inset-shadow));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--color-btn-hover-bg);
-    border-color: var(--color-btn-hover-border);
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
     transition-duration: 0.1s;
   }
 
   &:active {
-    background-color: var(--color-btn-active-bg);
-    border-color: var(--color-btn-active-border);
+    background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
     transition: none;
   }
 
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--color-btn-selected-bg);
-    box-shadow: var(--color-primer-shadow-inset);
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
+    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-btn-bg);
-    border-color: var(--color-btn-border);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--button-default-bgColor-rest, var(--color-btn-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
 
     .octicon {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 }
@@ -105,16 +105,16 @@
 // Primary button
 
 .btn-primary {
-  color: var(--color-btn-primary-text);
-  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, var(--color-btn-primary-text));
+  background-color: var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));
+  border-color: var(--button-primary-borderColor-rest, var(--color-btn-primary-border));
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
 
   &:hover,
   &.hover,
   [open] > & {
-    background-color: var(--color-btn-primary-hover-bg);
-    border-color: var(--color-btn-primary-hover-border);
+    background-color: var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));
+    border-color: var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border));
   }
 
   // fallback :focus state
@@ -136,29 +136,29 @@
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--color-btn-primary-selected-bg);
-    box-shadow: var(--color-btn-primary-selected-shadow);
+    background-color: var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));
+    box-shadow: var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow));
   }
 
   &:disabled,
   &.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);
+    color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+    background-color: var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));
+    border-color: var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));
 
     .octicon {
-      color: var(--color-btn-primary-disabled-text);
+      color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-primary-counter-bg);
+    background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
   }
 
   .octicon {
-    color: var(--color-btn-primary-icon);
+    color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
   }
 }
 
@@ -185,17 +185,17 @@ a.btn-primary {
 // Outline button
 
 .btn-outline {
-  color: var(--color-btn-outline-text);
+  color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
 
   &:hover,
   [open] > & {
-    color: var(--color-btn-outline-hover-text);
-    background-color: var(--color-btn-outline-hover-bg);
-    border-color: var(--color-btn-outline-hover-border);
-    box-shadow: var(--color-btn-outline-hover-shadow), var(--color-btn-outline-hover-inset-shadow);
+    color: var(--button-outline-fgColor-hover, var(--color-btn-outline-hover-text));
+    background-color: var(--button-outline-bgColor-hover, var(--color-btn-outline-hover-bg));
+    border-color: var(--button-outline-borderColor-hover, var(--color-btn-outline-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-outline-hover-shadow)), var(--shadow-highlight, var(--color-btn-outline-hover-inset-shadow));
 
     .Counter {
-      background-color: var(--color-btn-outline-hover-counter-bg);
+      background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
     }
 
     .octicon {
@@ -206,10 +206,10 @@ a.btn-primary {
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: var(--color-btn-outline-selected-text);
-    background-color: var(--color-btn-outline-selected-bg);
-    border-color: var(--color-btn-outline-selected-border);
-    box-shadow: var(--color-btn-outline-selected-shadow);
+    color: var(--button-outline-fgColor-active, var(--color-btn-outline-selected-text));
+    background-color: var(--button-outline-bgColor-active, var(--color-btn-outline-selected-bg));
+    border-color: var(--button-outline-borderColor-active, var(--color-btn-outline-selected-border));
+    box-shadow: var(--button-outline-shadow-selected, var(--color-btn-outline-selected-shadow));
 
     // fallback :focus state
     &:focus {
@@ -231,76 +231,76 @@ a.btn-primary {
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-btn-outline-disabled-text);
-    background-color: var(--color-btn-outline-disabled-bg);
-    border-color: var(--color-btn-border);
+    color: var(--button-outline-fgColor-disabled, var(--color-btn-outline-disabled-text));
+    background-color: var(--button-outline-bgColor-disabled, var(--color-btn-outline-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
     box-shadow: none;
 
     .Counter {
-      background-color: var(--color-btn-outline-disabled-counter-bg);
+      background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-outline-counter-bg);
+    background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
   }
 }
 
 // Danger button
 
 .btn-danger {
-  color: var(--color-btn-danger-text);
+  color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
 
   .octicon {
-    color: var(--color-btn-danger-icon);
+    color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
   }
 
   &:hover,
   [open] > & {
-    color: 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, var(--color-btn-danger-hover-text));
+    background-color: var(--button-danger-bgColor-hover, var(--color-btn-danger-hover-bg));
+    border-color: var(--button-outline-borderColor-hover, var(--color-btn-danger-hover-border));
+    box-shadow: var(--shadow-resting-small, var(--color-btn-danger-hover-shadow)), var(--shadow-highlight, var(--color-btn-danger-hover-inset-shadow));
 
     .Counter {
-      background-color: var(--color-btn-danger-hover-counter-bg);
+      background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
     }
 
     .octicon {
-      color: var(--color-btn-danger-hover-icon);
+      color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
     }
   }
 
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    color: 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, var(--color-btn-danger-selected-text));
+    background-color: var(--button-danger-bgColor-active, var(--color-btn-danger-selected-bg));
+    border-color: var(--button-danger-borderColor-active, var(--color-btn-danger-selected-border));
+    box-shadow: var(--button-danger-shadow-selected, var(--color-btn-danger-selected-shadow));
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: 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, var(--color-btn-danger-disabled-text));
+    background-color: var(--button-danger-bgColor-disabled, var(--color-btn-danger-disabled-bg));
+    border-color: var(--button-default-borderColor-rest, var(--color-btn-border));
     box-shadow: none;
 
     .Counter {
-      background-color: var(--color-btn-danger-disabled-counter-bg);
+      background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
     }
 
     .octicon {
-      color: var(--color-btn-danger-disabled-text);
+      color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--color-btn-danger-counter-bg);
+    background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
   }
 }
 
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 328b2fe27a..ef5fd41e8b 100644
--- a/src/buttons/misc.scss
+++ b/src/buttons/misc.scss
@@ -7,7 +7,7 @@
   display: inline-block;
   padding: 0;
   font-size: inherit;
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -24,7 +24,7 @@
   &[aria-disabled='true'] {
     &,
     &:hover {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
       cursor: default;
     }
   }
@@ -42,7 +42,7 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   background-color: transparent; // Reset default gradient backgrounds and colors
   border: 0;
   border-radius: $border-radius;
@@ -50,8 +50,8 @@
 
   &:hover,
   &.zeroclipboard-is-hover {
-    color: var(--color-accent-fg);
-    background-color: var(--color-btn-hover-bg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
+    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
     outline: none;
     box-shadow: none;
   }
@@ -60,21 +60,21 @@
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
     background: none;
-    border-color: var(--color-btn-active-border);
+    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
 
     @include focusOutline;
   }
 
   &:active &.zeroclipboard-is-active {
-    background-color: var(--color-btn-selected-bg);
+    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     background-color: transparent;
   }
 }
@@ -89,7 +89,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   vertical-align: middle;
 
   // For `<button>` elements
@@ -98,7 +98,7 @@
   box-shadow: none;
 
   &:hover {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   &:focus,
@@ -108,17 +108,17 @@
 
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
 
     &:hover {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: var(--color-danger-fg);
+  color: var(--fgColor-danger, var(--color-danger-fg));
 }
 
 // Close button
@@ -126,12 +126,12 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   background: transparent;
   border: 0;
 
   &:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   &:active {
@@ -165,7 +165,7 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
   vertical-align: middle;
   background: var(--color-neutral-muted);
@@ -179,8 +179,8 @@
   }
 
   &:active {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   }
 }
 
@@ -210,14 +210,14 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-default);
-  border: $border-width $border-style var(--color-btn-border);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
 
   &:hover,
   &:active {
@@ -225,7 +225,7 @@
   }
 
   &:hover {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
     cursor: pointer;
   }
 }
diff --git a/src/color-modes/native.scss b/src/color-modes/native.scss
index 8b8d5ee0d4..f97c610072 100644
--- a/src/color-modes/native.scss
+++ b/src/color-modes/native.scss
@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
 }
 
 // Windows High Contrast mode
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index dfb09262fb..7bb31ead50 100644
--- a/src/forms/form-control.scss
+++ b/src/forms/form-control.scss
@@ -12,14 +12,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style var(--color-border-default);
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
   border-radius: $border-radius;
-  box-shadow: var(--color-primer-shadow-inset);
+  box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
@@ -49,14 +49,14 @@
 
   &[disabled],
   fieldset[disabled] & {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
+    border-color: var(--borderColor-default, var(--color-border-default));
+    -webkit-text-fill-color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
     opacity: 1; // Fix for Safari iOS
 
     &::placeholder {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 
@@ -79,10 +79,10 @@ textarea.form-control {
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
   &:focus {
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
   }
 }
 
@@ -142,7 +142,7 @@ textarea.form-control {
       // stylelint-disable-next-line primer/spacing
       padding: 2px $spacer-1;
       font-style: normal;
-      background: var(--color-attention-subtle);
+      background: var(--bgColor-attention-muted, var(--color-attention-subtle));
       border-radius: $border-radius;
     }
   }
@@ -160,7 +160,7 @@ textarea.form-control {
     margin: 0;
     font-size: $font-size-small;
     font-weight: $font-weight-normal;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 }
 
@@ -199,7 +199,7 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: var(--color-fg-muted);
+        color: var(--fgColor-muted, var(--color-fg-muted));
       }
 
       img {
@@ -251,9 +251,9 @@ input::-webkit-inner-spin-button {
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  color: var(--color-attention-fg);
-  background: var(--color-attention-subtle);
-  border: $border-width $border-style var(--color-attention-emphasis);
+  color: var(--fgColor-attention, var(--color-attention-fg));
+  background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
   border-radius: $border-radius;
 
   p {
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 109b1b425e..0496ad9a84 100644
--- a/src/forms/form-group.scss
+++ b/src/forms/form-group.scss
@@ -17,7 +17,7 @@
   // Autocomplete with embedded icon
   .form-control.autocomplete-embedded-icon-wrap {
     &:focus-within {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
   }
 
@@ -28,10 +28,10 @@
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: var(--color-canvas-inset);
+    background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
     &:focus {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
 
     &.shorter {
@@ -98,11 +98,11 @@
       margin: $spacer-1 0 0;
 
       &.is-error {
-        color: var(--color-danger-fg);
+        color: var(--fgColor-danger, var(--color-danger-fg));
       }
 
       &.is-success {
-        color: var(--color-success-fg);
+        color: var(--fgColor-success, var(--color-success-fg));
       }
 
       + .note {
@@ -121,7 +121,7 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
       content: '*';
     }
   }
@@ -154,7 +154,7 @@
   &.successful {
     .success {
       display: inline;
-      color: var(--color-success-fg);
+      color: var(--fgColor-success, var(--color-success-fg));
     }
   }
 
@@ -210,63 +210,63 @@
 
   &.successed {
     .success {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-      border-color: var(--color-success-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));
+      border-color: var(--borderColor-success-muted, var(--color-success-muted));
 
       &::after {
         border-bottom-color: var(--color-success-subtle);
       }
 
       &::before {
-        border-bottom-color: var(--color-success-muted);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
     }
   }
 
   &.warn {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-attention-emphasis);
+      border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
     }
 
     .warning {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-      border-color: var(--color-attention-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));
+      border-color: var(--borderColor-attention-muted, var(--color-attention-muted));
 
       &::after {
         border-bottom-color: var(--color-attention-subtle);
       }
 
       &::before {
-        border-bottom-color: var(--color-attention-muted);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
     }
   }
 
   &.errored {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-danger-emphasis);
+      border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
     }
 
     label {
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
     }
 
     .error {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-      border-color: var(--color-danger-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));
+      border-color: var(--borderColor-danger-muted, var(--color-danger-muted));
 
       &::after {
         border-bottom-color: var(--color-danger-subtle);
       }
 
       &::before {
-        border-bottom-color: var(--color-danger-muted);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
     }
   }
@@ -278,7 +278,7 @@
   // stylelint-disable-next-line primer/spacing
   margin: $spacer-1 0 2px;
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 
   .spinner {
     // stylelint-disable-next-line primer/spacing
diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss
index 77bbdf5cf1..9376acb056 100644
--- a/src/forms/form-select.scss
+++ b/src/forms/form-select.scss
@@ -6,7 +6,7 @@
   max-width: 100%;
   height: $size-5;
   padding-right: $spacer-4;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   // SVG with fill: #586069 (--color-icon-secondary)
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
   background-repeat: no-repeat;
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
index 73e2787bb0..ad087dd810 100644
--- a/src/forms/radio-group.scss
+++ b/src/forms/radio-group.scss
@@ -13,14 +13,14 @@
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   cursor: pointer;
-  border: $border-width $border-style var(--color-border-default);
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: var(--color-accent-emphasis);
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
   }
 
   &:first-of-type {
@@ -36,7 +36,7 @@
 
   .octicon {
     margin-left: $spacer-1;
-    color: var(--color-fg-subtle);
+    color: var(--fgColor-muted, var(--color-fg-subtle));
   }
 }
 
@@ -50,9 +50,9 @@
     position: relative; // enables z-index
 
     + .radio-label {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
       cursor: default;
-      background-color: var(--color-neutral-subtle);
+      background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 
       .octicon {
         color: inherit;
diff --git a/src/header/header.scss b/src/header/header.scss
index a53011ad38..6aa07f8a83 100644
--- a/src/header/header.scss
+++ b/src/header/header.scss
@@ -4,8 +4,8 @@
   padding: $spacer-3;
   font-size: $h5-size;
   line-height: $lh-default;
-  color: var(--color-header-text);
-  background-color: var(--color-header-bg);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--header-bgColor, var(--color-header-bg));
   align-items: center;
   flex-wrap: nowrap;
 }
@@ -24,20 +24,20 @@
 
 .Header-link {
   font-weight: $font-weight-bold;
-  color: var(--color-header-logo);
+  color: var(--header-fgColor-logo, var(--color-header-logo));
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    color: var(--color-header-text);
+    color: var(--header-fgColor-default, var(--color-header-text));
     text-decoration: none;
   }
 }
 
 .Header-input {
-  color: var(--color-header-text);
-  background-color: var(--color-header-search-bg);
-  border: $border-width $border-style var(--color-header-search-border);
+  color: var(--header-fgColor-default, var(--color-header-text));
+  background-color: var(--headerSearch-bgColor, var(--color-header-search-bg));
+  border: $border-width $border-style var(--headerSearch-borderColor, var(--color-header-search-border));
   box-shadow: none;
 
   &::placeholder {
diff --git a/src/layout/app-frame.scss b/src/layout/app-frame.scss
index 433c11bad4..0703120c86 100644
--- a/src/layout/app-frame.scss
+++ b/src/layout/app-frame.scss
@@ -29,8 +29,8 @@
     display: flex;
     width: 100%;
     padding: var(--base-size-16, 16px);
-    background: var(--color-canvas-inset);
-    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
+    background: var(--bgColor-muted, var(--color-canvas-inset));
+    padding-block-end: calc(var(--base-size-16, 16px) - var(--borderWidth-thin, 1px));
     isolation: isolate;
     align-items: center;
     gap: var(--base-size-8, 8px);
@@ -67,7 +67,7 @@
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
       background: var(--color-border-default);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      border-radius: var(--borderRadius-full, 100vh);
     }
 
     &:focus {
@@ -75,17 +75,17 @@
       display: grid;
       width: auto;
       height: auto;
-      min-height: var(--primer-control-medium-size, 32px);
-      padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
+      min-height: var(--control-medium-size, 32px);
+      padding: 0 var(--control-medium-paddingInline-spacious, 16px);
       overflow: auto;
-      color: var(--color-fg-on-emphasis);
-      background: var(--color-accent-emphasis);
-      border-radius: var(--primer-borderRadius-full, 100vh);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
       @media (pointer: coarse) {
         &::after {
-          @include minTouchTarget(var(--primer-control-minTarget-coarse, 44px));
+          @include minTouchTarget(var(--control-minTarget-coarse, 44px));
         }
       }
 
@@ -105,7 +105,7 @@
         }
 
         55% {
-          color: var(--color-fg-on-emphasis);
+          color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
         }
 
         100% {
diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss
index 5a3625f8ff..488aa453f3 100644
--- a/src/layout/page-layout.scss
+++ b/src/layout/page-layout.scss
@@ -44,7 +44,7 @@ $Layout-responsive-variant-max-breakpoint: 'md' !default;
   width: calc(100% + (var(--Layout-outer-spacing-x) * 2));
   height: #{$spacer-2}; // 8px
   content: '';
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-muted, var(--color-canvas-inset));
   box-shadow: inset 0 1px $Layout-divider-color, inset 0 -1px $Layout-divider-color;
 }
 
diff --git a/src/layout/stack.scss b/src/layout/stack.scss
index 2a681b14ce..62af450964 100644
--- a/src/layout/stack.scss
+++ b/src/layout/stack.scss
@@ -25,7 +25,7 @@
   // │  ├─ &.Stack-item--expand-[ whenNarrow | whenRegular | whenWide ]
   // │  ├─ &.Stack-item--keepSize-[ whenNarrow | whenRegular | whenWide ]
 
-  $Stack-gap-default: var(--primer-stack-gap-normal, 16px);
+  $Stack-gap-default: var(--stack-gap-normal, 16px);
 
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
@@ -65,18 +65,18 @@
   }
 
   .Stack--gap-condensed#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-condensed, 8px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-condensed, 8px);
   }
 
   .Stack--gap-normal#{$viewportRange} {
-    --Stack-gap#{$viewportRange}: var(--primer-stack-gap-normal, 16px);
+    --Stack-gap#{$viewportRange}: var(--stack-gap-normal, 16px);
   }
 
   // There's no .Stack--gap-spacious-whenNarrow
   // Narrow viewports render `spacious` gap as `normal`
   @if $viewportRange != '-whenNarrow' {
     .Stack--gap-spacious#{$viewportRange} {
-      --Stack-gap#{$viewportRange}: var(--primer-stack-gap-spacious, 24px);
+      --Stack-gap#{$viewportRange}: var(--stack-gap-spacious, 24px);
     }
   }
 
@@ -161,14 +161,14 @@
 
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-divider,
   :not(.Stack--dir-inline#{$viewportRange}) > .Stack-item > .Stack-divider {
-    border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-block-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: auto;
     block-size: 0;
   }
 
   .Stack--dir-inline#{$viewportRange} > .Stack-divider,
   .Stack--dir-inline#{$viewportRange} > .Stack-item > .Stack-divider {
-    border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
+    border-inline-end: var(--borderWidth-thin, 1px) solid var(--Stack-divider-color);
     inline-size: 0;
     block-size: auto;
   }
diff --git a/src/markdown/blob-csv.scss b/src/markdown/blob-csv.scss
index 7374e7b2c3..02144b0574 100644
--- a/src/markdown/blob-csv.scss
+++ b/src/markdown/blob-csv.scss
@@ -15,7 +15,7 @@
     // stylelint-disable-next-line primer/spacing
     padding: 10px $spacer-2 9px;
     text-align: right;
-    background: var(--color-canvas-default);
+    background: var(--bgColor-default, var(--color-canvas-default));
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: var(--color-canvas-subtle);
+    background: var(--bgColor-muted, var(--color-canvas-subtle));
     border-top: 0;
   }
 }
diff --git a/src/markdown/code.scss b/src/markdown/code.scss
index ef9784edc1..5d486e77d3 100644
--- a/src/markdown/code.scss
+++ b/src/markdown/code.scss
@@ -58,8 +58,8 @@
     font-size: 85%;
     // stylelint-disable-next-line primer/typography
     line-height: 1.45;
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-subtle);
+    color: var(--fgColor-default, var(--color-fg-default));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
     border-radius: $border-radius;
   }
 
diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss
index 492782928b..7687a99d50 100644
--- a/src/markdown/footnotes.scss
+++ b/src/markdown/footnotes.scss
@@ -14,7 +14,7 @@
 
   .footnotes {
     font-size: $h6-size;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     border-top: $border;
 
     ol {
@@ -40,12 +40,12 @@
       pointer-events: none;
       content: '';
       // stylelint-disable-next-line primer/borders
-      border: 2px $border-style var(--color-accent-emphasis);
+      border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
       border-radius: $border-radius;
     }
 
     li:target {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
 
     .data-footnote-backref g-emoji {
diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss
index 03a1311779..df82bc27dd 100644
--- a/src/markdown/headings.scss
+++ b/src/markdown/headings.scss
@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
       vertical-align: middle;
       visibility: hidden;
     }
@@ -41,7 +41,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 2em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h2 {
@@ -49,7 +49,7 @@
     padding-bottom: 0.3em;
     // stylelint-disable-next-line primer/typography
     font-size: 1.5em;
-    border-bottom: $border-width $border-style var(--color-border-muted);
+    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
   }
 
   h3 {
@@ -69,7 +69,7 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   summary {
diff --git a/src/markdown/images.scss b/src/markdown/images.scss
index 5826196e25..f4be72b1c0 100644
--- a/src/markdown/images.scss
+++ b/src/markdown/images.scss
@@ -8,7 +8,7 @@
     // because we put padding on the images to hide header lines, and some people
     // specify the width of their images in their markdown.
     box-sizing: content-box;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
 
     &[align='right'] {
       // stylelint-disable-next-line primer/spacing
@@ -44,7 +44,7 @@
       // stylelint-disable-next-line primer/spacing
       margin: 13px 0 0;
       overflow: hidden;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     span img {
@@ -57,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: var(--color-fg-default);
+      color: var(--fgColor-default, var(--color-fg-default));
     }
   }
 
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index d9ddf4adae..161f137a6a 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -43,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: var(--color-danger-fg);
+    color: var(--fgColor-danger, var(--color-danger-fg));
   }
 
   .anchor {
@@ -81,9 +81,9 @@
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style var(--color-border-default);
+    border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default));
 
     > :first-child {
       margin-top: 0;
diff --git a/src/markdown/tables.scss b/src/markdown/tables.scss
index 0575f14939..23d781a4c5 100644
--- a/src/markdown/tables.scss
+++ b/src/markdown/tables.scss
@@ -17,7 +17,7 @@
     td {
       // stylelint-disable-next-line primer/spacing
       padding: 6px 13px;
-      border: $border-width $border-style var(--color-border-default);
+      border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
     }
 
     td {
@@ -27,11 +27,11 @@
     }
 
     tr {
-      background-color: var(--color-canvas-default);
-      border-top: $border-width $border-style var(--color-border-muted);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
+      border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
       &:nth-child(2n) {
-        background-color: var(--color-canvas-subtle);
+        background-color: var(--bgColor-muted, var(--color-canvas-subtle));
       }
     }
 
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index 9eac3d8aec..489649ebdb 100644
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@@ -13,12 +13,12 @@
   }
 
   &.pjax-active .filter-item {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
     background-color: transparent;
 
     &.pjax-active {
-      color: var(--color-fg-on-emphasis);
-      background-color: var(--color-accent-emphasis);
+      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
     }
   }
 }
@@ -30,7 +30,7 @@
   margin-bottom: $spacer-1;
   overflow: hidden;
   font-size: $h5-size;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -39,14 +39,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
 
     // fallback :focus state
     &:focus {
@@ -77,6 +77,6 @@
     bottom: 2px;
     z-index: -1;
     display: inline-block;
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 }
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index 26d8d0a180..0410458530 100644
--- a/src/navigation/sidenav.scss
+++ b/src/navigation/sidenav.scss
@@ -3,7 +3,7 @@
 // A vertical list of navigational links, typically used on the left side of a page.
 
 .SideNav {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px $spacer-3;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   &:first-child {
     border-top: 0;
@@ -45,16 +45,16 @@
 
 .SideNav-item:hover {
   text-decoration: none;
-  background-color: var(--color-neutral-subtle);
+  background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 }
 
 .SideNav-item:active {
-  background-color: var(--color-canvas-subtle);
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
 }
 
 .SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
-  background-color: var(--color-sidenav-selected-bg);
+  background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
 
   // Bar on the left
   &::before {
@@ -69,7 +69,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: $spacer-2;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 // Sub Nav
@@ -81,19 +81,19 @@
   display: block;
   width: 100%;
   padding: $spacer-1 0;
-  color: var(--color-accent-fg);
+  color: var(--fgColor-accent, var(--color-accent-fg));
   text-align: left;
   background-color: transparent;
   border: 0;
 }
 
 .SideNav-subItem:hover {
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-decoration: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 }
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index c973d64e35..9d366b8a66 100644
--- a/src/navigation/subnav.scss
+++ b/src/navigation/subnav.scss
@@ -12,7 +12,7 @@
 .subnav-bordered {
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 20px;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 .subnav-flush {
@@ -27,8 +27,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
-  border: $border-width $border-style var(--color-border-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -38,16 +38,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     z-index: 2;
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
-    border-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
 
     // fallback :focus state
     &:focus {
@@ -86,7 +86,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: $spacer-5;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 }
 
 .subnav-search-input-wide {
@@ -99,7 +99,7 @@
   top: 9px;
   left: 8px;
   display: block;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   pointer-events: none;
 }
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index 43090b4e74..4e2970837f 100644
--- a/src/pagination/pagination.scss
+++ b/src/pagination/pagination.scss
@@ -10,7 +10,7 @@
     font-style: normal;
     // stylelint-disable-next-line primer/typography
     line-height: 20px;
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -23,26 +23,26 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--color-border-default);
+      border-color: var(--borderColor-default, var(--color-border-default));
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--color-accent-fg);
+    color: var(--fgColor-accent, var(--color-accent-fg));
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current='false']) {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-accent-emphasis);
+    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
     border-color: transparent;
   }
 
@@ -52,7 +52,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled='true']:hover {
-    color: var(--color-primer-fg-disabled);
+    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
     cursor: default;
     border-color: transparent;
   }
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index 33365b3b74..cf9fbca37e 100644
--- a/src/select-menu/select-menu.scss
+++ b/src/select-menu/select-menu.scss
@@ -41,7 +41,7 @@ $SelectMenu-max-height: 480px !default;
   left: 0;
   pointer-events: none;
   content: '';
-  background-color: var(--color-primer-canvas-backdrop);
+  background-color: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 
   @include breakpoint(sm) {
     display: none;
@@ -61,11 +61,11 @@ $SelectMenu-max-height: 480px !default;
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: var(--color-canvas-overlay);
-  border: $border-width $border-style var(--color-select-menu-backdrop-border);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  box-shadow: var(--color-shadow-large);
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
   animation: SelectMenu-modal-animation 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
 
   @keyframes SelectMenu-modal-animation {
@@ -88,9 +88,9 @@ $SelectMenu-max-height: 480px !default;
     max-height: $SelectMenu-max-height;
     margin: $spacer-2 0 $spacer-3 0;
     font-size: $font-size-small;
-    border-color: var(--color-border-default);
+    border-color: var(--borderColor-default, var(--color-border-default));
     border-radius: $border-radius;
-    box-shadow: var(--color-shadow-large);
+    box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
     animation-name: SelectMenu-modal-animation--sm;
   }
 }
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-3;
   margin: -$spacer-3;
   line-height: 1;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   background-color: transparent;
   border: 0;
 
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: $spacer-3;
   margin: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     padding: $spacer-2;
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: $spacer-3;
   overflow: hidden;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   text-align: left;
   cursor: pointer;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
   border: 0;
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -252,7 +252,7 @@ $SelectMenu-max-height: 480px !default;
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
   background-color: transparent;
   border: 0;
@@ -270,14 +270,14 @@ $SelectMenu-max-height: 480px !default;
 
   &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
     cursor: default;
-    background-color: var(--color-canvas-overlay);
+    background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
     // stylelint-disable-next-line primer/box-shadow
     box-shadow: 0 0 0 1px var(--color-border-muted);
 
     @include breakpoint(sm) {
-      border-color: var(--color-border-muted);
+      border-color: var(--borderColor-muted, var(--color-border-muted));
       box-shadow: none;
     }
   }
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 }
 
 // Blankslate and Loading
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: $spacer-4 $spacer-3;
   text-align: center;
-  background-color: var(--color-canvas-overlay);
+  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
 }
 
 // Divider
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-muted);
-  background-color: var(--color-canvas-subtle);
-  border-bottom: $border-width $border-style var(--color-border-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
+  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--color-border-muted);
+    border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
     &:empty {
       padding: 0;
@@ -338,9 +338,9 @@ $SelectMenu-max-height: 480px !default;
   z-index: 0; // Avoid top border from getting covered by the negative margin of the list
   padding: $spacer-2 $spacer-3;
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
   text-align: center;
-  border-top: $border-width $border-style var(--color-border-muted);
+  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -387,7 +387,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item[aria-checked='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
 
   .SelectMenu-icon--check {
     visibility: visible;
@@ -402,7 +402,7 @@ $SelectMenu-max-height: 480px !default;
 
 .SelectMenu-item:disabled,
 .SelectMenu-item[aria-disabled='true'] {
-  color: var(--color-primer-fg-disabled);
+  color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
   pointer-events: none;
 }
 
@@ -413,33 +413,33 @@ $SelectMenu-max-height: 480px !default;
 @media (hover: hover) {
   body:not(.intent-mouse) .SelectMenu-closeButton:focus,
   .SelectMenu-closeButton:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-closeButton:active {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: var(--color-neutral-subtle);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
   }
 
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
-    background-color: var(--color-select-menu-tap-focus-bg);
+    background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
   }
 
   .SelectMenu-tab:hover {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default, var(--color-fg-default));
   }
 
   .SelectMenu-tab:not([aria-selected='true']):active {
-    color: var(--color-fg-default);
-    background-color: var(--color-canvas-subtle);
+    color: var(--fgColor-default, var(--color-fg-default));
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 }
 
@@ -451,7 +451,7 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: var(--color-canvas-subtle);
+    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
   }
 
   // iOS Safari
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index 9e3c5b0d93..5686239241 100644
--- a/src/support/variables/misc.scss
+++ b/src/support/variables/misc.scss
@@ -3,8 +3,8 @@
 // Border
 $border-width: 1px !default;
 $border-style: solid !default;
-$border: $border-width $border-style var(--color-border-default) !default;
-$border-rem: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default) !default;
+$border: $border-width $border-style var(--borderColor-default, var(--color-border-default)) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--color-border-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index ed1cb21da9..e9b1fe3132 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -3,10 +3,10 @@
 .Toast {
   display: flex;
   margin: $spacer-2;
-  color: var(--color-fg-default);
-  background-color: var(--color-canvas-default);
+  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-floating-large, var(--color-shadow-large));
 
   @include breakpoint(sm) {
     width: max-content;
@@ -21,8 +21,8 @@
   justify-content: center;
   width: $spacer-3 * 3;
   flex-shrink: 0;
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-accent-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
   border: $border-width $border-style transparent;
   border-right: 0;
   border-top-left-radius: inherit;
@@ -52,38 +52,38 @@
 // Modifier
 
 .Toast--loading {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-neutral-emphasis);
+    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
   }
 }
 
 .Toast--error {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-danger-emphasis);
+    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
   }
 }
 
 .Toast--warning {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-attention-emphasis);
+    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
   }
 }
 
 .Toast--success {
-  color: var(--color-fg-default);
-  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--color-shadow-large);
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-shadow: inset 0 0 0 1px var(--color-border-default), var(--shadow-floating-large, var(--color-shadow-large));
 
   .Toast-icon {
-    background-color: var(--color-success-emphasis);
+    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
   }
 }
 
diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss
index b8eca264d5..321c84c5ca 100644
--- a/src/tooltips/tooltips.scss
+++ b/src/tooltips/tooltips.scss
@@ -10,7 +10,7 @@
   padding: $em-spacer-5 $em-spacer-6;
   font: normal normal 11px/1.5 $body-font;
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--color-fg-on-emphasis);
+  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -20,7 +20,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--color-neutral-emphasis-plus);
+  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   border-radius: $border-radius;
   opacity: 0;
 }
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index 8e958da267..62f0eec474 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -31,11 +31,11 @@
     .border#{$variant}-left-0   { border-left: 0 !important; }
 
     // Rounded corners
-    .rounded#{$variant}   { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}   { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
     .rounded#{$variant}-0 { border-radius: 0 !important; }
-    .rounded#{$variant}-1 { border-radius: var(--primer-borderRadius-small, $border-radius-1) !important; }
-    .rounded#{$variant}-2 { border-radius: var(--primer-borderRadius-medium, $border-radius-2) !important; }
-    .rounded#{$variant}-3 { border-radius: var(--primer-borderRadius-large, $border-radius-3) !important; }
+    .rounded#{$variant}-1 { border-radius: var(--borderRadius-small, $border-radius-1) !important; }
+    .rounded#{$variant}-2 { border-radius: var(--borderRadius-medium, $border-radius-2) !important; }
+    .rounded#{$variant}-3 { border-radius: var(--borderRadius-large, $border-radius-3) !important; }
 
     @each $edge, $corners in $edges {
       .rounded#{$variant}-#{$edge}-0 {
@@ -46,19 +46,19 @@
 
       .rounded#{$variant}-#{$edge}-1 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-small, $border-radius-1) !important;
+          border-#{$corner}-radius: var(--borderRadius-small, $border-radius-1) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-2 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-2) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-2) !important;
         }
       }
 
       .rounded#{$variant}-#{$edge}-3 {
         @each $corner in $corners {
-          border-#{$corner}-radius: var(--primer-borderRadius-medium, $border-radius-3) !important;
+          border-#{$corner}-radius: var(--borderRadius-medium, $border-radius-3) !important;
         }
       }
     }
@@ -66,7 +66,7 @@
 }
 
 /* Add a 50% border-radius to make something into a circle */
-.circle { border-radius: var(--primer-borderRadius-full, 50%) !important; }
+.circle { border-radius: var(--borderRadius-full, 50%) !important; }
 
 /* Change the border style to dashed, in conjunction with another utility */
 .border-dashed {
diff --git a/src/utilities/box-shadow.scss b/src/utilities/box-shadow.scss
index d41f73b407..ccca24a81a 100644
--- a/src/utilities/box-shadow.scss
+++ b/src/utilities/box-shadow.scss
@@ -3,19 +3,19 @@
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--color-shadow-small) !important;
+  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
 }
 
 .color-shadow-medium {
-  box-shadow: var(--color-shadow-medium) !important;
+  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
 }
 
 .color-shadow-large {
-  box-shadow: var(--color-shadow-large) !important;
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--color-shadow-extra-large) !important;
+  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
 }
 
 // Turn off box shadow
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 9f06ef1e75..e1eea4dcbd 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -2,91 +2,91 @@
 
 // Foreground
 
-.color-fg-default     { color: var(--color-fg-default) !important; }
-.color-fg-muted       { color: var(--color-fg-muted) !important; }
-.color-fg-subtle      { color: var(--color-fg-subtle) !important; }
-
-.color-fg-accent    { color: var(--color-accent-fg) !important; }
-.color-fg-success   { color: var(--color-success-fg) !important; }
-.color-fg-attention { color: var(--color-attention-fg) !important; }
-.color-fg-severe    { color: var(--color-severe-fg) !important; }
-.color-fg-danger    { color: var(--color-danger-fg) !important; }
-.color-fg-open      { color: var(--color-open-fg) !important; }
-.color-fg-closed    { color: var(--color-closed-fg) !important; }
-.color-fg-done      { color: var(--color-done-fg) !important; }
-.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
-
-.color-fg-on-emphasis { color: var(--color-fg-on-emphasis) !important; }
+.color-fg-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
+.color-fg-muted       { color: var(--fgColor-muted, var(--color-fg-muted)) !important; }
+.color-fg-subtle      { color: var(--fgColor-muted, var(--color-fg-subtle)) !important; }
+
+.color-fg-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
+.color-fg-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
+.color-fg-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
+.color-fg-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
+.color-fg-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
+.color-fg-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
+.color-fg-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
+.color-fg-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
+.color-fg-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
+
+.color-fg-on-emphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
 
 // Background
 
-.color-bg-default  { background-color: var(--color-canvas-default) !important; }
-.color-bg-overlay  { background-color: var(--color-canvas-overlay) !important; }
-.color-bg-inset    { background-color: var(--color-canvas-inset) !important; }
-.color-bg-subtle   { background-color: var(--color-canvas-subtle) !important; }
-.color-bg-emphasis { background-color: var(--color-neutral-emphasis-plus) !important; }
+.color-bg-default  { background-color: var(--bgColor-default, var(--color-canvas-default)) !important; }
+.color-bg-overlay  { background-color: var(--overlay-bgColor, var(--color-canvas-overlay)) !important; }
+.color-bg-inset    { background-color: var(--bgColor-muted, var(--color-canvas-inset)) !important; }
+.color-bg-subtle   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
+.color-bg-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
 
-.color-bg-accent          { background-color: var(--color-accent-subtle) !important; }
-.color-bg-accent-emphasis { background-color: var(--color-accent-emphasis) !important; }
+.color-bg-accent          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
+.color-bg-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-bg-success          { background-color: var(--color-success-subtle) !important; }
-.color-bg-success-emphasis { background-color: var(--color-success-emphasis) !important; }
+.color-bg-success          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
+.color-bg-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-bg-attention          { background-color: var(--color-attention-subtle) !important; }
-.color-bg-attention-emphasis { background-color: var(--color-attention-emphasis) !important; }
+.color-bg-attention          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
+.color-bg-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-bg-severe          { background-color: var(--color-severe-subtle) !important; }
-.color-bg-severe-emphasis { background-color: var(--color-severe-emphasis) !important; }
+.color-bg-severe          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
+.color-bg-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-bg-danger          { background-color: var(--color-danger-subtle) !important; }
-.color-bg-danger-emphasis { background-color: var(--color-danger-emphasis) !important; }
+.color-bg-danger          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
+.color-bg-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-bg-open          { background-color: var(--color-open-subtle) !important; }
-.color-bg-open-emphasis { background-color: var(--color-open-emphasis) !important; }
+.color-bg-open          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
+.color-bg-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-bg-closed          { background-color: var(--color-closed-subtle) !important; }
-.color-bg-closed-emphasis { background-color: var(--color-closed-emphasis) !important; }
+.color-bg-closed          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
+.color-bg-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-bg-done          { background-color: var(--color-done-subtle) !important; }
-.color-bg-done-emphasis { background-color: var(--color-done-emphasis) !important; }
+.color-bg-done          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
+.color-bg-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-bg-sponsors          { background-color: var(--color-sponsors-subtle) !important; }
-.color-bg-sponsors-emphasis { background-color: var(--color-sponsors-emphasis) !important; }
+.color-bg-sponsors          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
+.color-bg-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 .color-bg-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default { border-color: var(--color-border-default) !important; }
-.color-border-muted   { border-color: var(--color-border-muted) !important; }
-.color-border-subtle  { border-color: var(--color-border-subtle) !important; }
+.color-border-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
+.color-border-muted   { border-color: var(--borderColor-muted, var(--color-border-muted)) !important; }
+.color-border-subtle  { border-color: var(--borderColor-muted, var(--color-border-subtle)) !important; }
 
-.color-border-accent          { border-color: var(--color-accent-muted) !important; }
-.color-border-accent-emphasis { border-color: var(--color-accent-emphasis) !important; }
+.color-border-accent          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
+.color-border-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
 
-.color-border-success          { border-color: var(--color-success-muted) !important; }
-.color-border-success-emphasis { border-color: var(--color-success-emphasis) !important; }
+.color-border-success          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
+.color-border-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
 
-.color-border-attention          { border-color: var(--color-attention-muted) !important; }
-.color-border-attention-emphasis { border-color: var(--color-attention-emphasis) !important; }
+.color-border-attention          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
+.color-border-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
 
-.color-border-severe          { border-color: var(--color-severe-muted) !important; }
-.color-border-severe-emphasis { border-color: var(--color-severe-emphasis) !important; }
+.color-border-severe          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
+.color-border-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
 
-.color-border-danger          { border-color: var(--color-danger-muted) !important; }
-.color-border-danger-emphasis { border-color: var(--color-danger-emphasis) !important; }
+.color-border-danger          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
+.color-border-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
 
-.color-border-open          { border-color: var(--color-open-muted) !important; }
-.color-border-open-emphasis { border-color: var(--color-open-emphasis) !important; }
+.color-border-open          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
+.color-border-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
 
-.color-border-closed          { border-color: var(--color-closed-muted) !important; }
-.color-border-closed-emphasis { border-color: var(--color-closed-emphasis) !important; }
+.color-border-closed          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
+.color-border-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
 
-.color-border-done          { border-color: var(--color-done-muted) !important; }
-.color-border-done-emphasis { border-color: var(--color-done-emphasis) !important; }
+.color-border-done          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
+.color-border-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
 
-.color-border-sponsors          { border-color: var(--color-sponsors-muted) !important; }
-.color-border-sponsors-emphasis { border-color: var(--color-sponsors-emphasis) !important; }
+.color-border-sponsors          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
+.color-border-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
 
 // Misc
 
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index df25180e46..00d6f11db7 100644
--- a/src/utilities/details.scss
+++ b/src/utilities/details.scss
@@ -15,7 +15,7 @@
 
 .details-overlay-dark[open] > summary::before {
   z-index: 111;
-  background: var(--color-primer-canvas-backdrop);
+  background: var(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
 }
 
 .details-reset {
diff --git a/yarn.lock b/yarn.lock
index 3b3964cbe1..a29897790b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1215,21 +1215,20 @@
   resolved "https://registry.yarnpkg.com/@primer/behaviors/-/behaviors-1.3.1.tgz#febae28e5f7824f1fa547389b3ff8563e171da58"
   integrity sha512-aMRDUQ350lk0FxtL5gJWPFHHOSSzDbJ6uNJVIt8XSqiGe1pxuW5mVVfrEp1uvzZ0pCHkCdm9fycjnfOeMeIrOQ==
 
-"@primer/primitives@^7.11.5":
-  version "7.11.5"
-  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.5.tgz#df36599f70d7a8283ce967c17c0e808ecb3984a2"
-  integrity sha512-UmFQA0BZ5BIQKrlKg1TOEjDzeeI2NWyeh/5cCvXVOjfLegCXIlHf/xCLl1KCYO4YeegHmC9g5tpPLTlWjtcbaA==
+"@primer/primitives@^7.11.7":
+  version "7.11.7"
+  resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.7.tgz#f6219ab8ea7212e7fe0878c3ebbf26767efd437a"
+  integrity sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==
   dependencies:
     markdown-table-ts "^1.0.3"
 
-"@primer/stylelint-config@^12.4.0":
-  version "12.7.0"
-  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.0.tgz#4fb7b77d543ebde78074a50f983b402379bb812b"
-  integrity sha512-aFIosv6VXKHRH/0JQLDHDV9UmUPgvPlHOE26IJz/UDZVT5KHtqj5sWf01XgKpwgp+Bbryxr7WgwKyCo6SvgC4A==
+"@primer/stylelint-config@0.0.0-20230420153251":
+  version "0.0.0-20230420153251"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-0.0.0-20230420153251.tgz#5b527c8ccf597105a457b2a8e29eeac16b662e62"
+  integrity sha512-dhsMZ0jxTbXu06qCuIkuEzSxQdfE39Mr9o0fP6pAxFhQKFPYcxvnqtY1PQSvCzicJV3+e4KmOHM0YO9Vp2xL/g==
   dependencies:
     anymatch "^3.1.1"
     globby "^11.0.1"
-    lodash.kebabcase "^4.1.1"
     postcss-scss "^4.0.2"
     postcss-value-parser "^4.0.2"
     string.prototype.matchall "^4.0.2"
@@ -4180,7 +4179,7 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
-lodash.kebabcase@4.1.1, lodash.kebabcase@^4.1.1:
+lodash.kebabcase@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
   integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=

From fdaf2b0d77e68cf7575831724811709d65c1630d Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Thu, 20 Apr 2023 09:40:29 -0700
Subject: [PATCH 2/3] add deprecated mtkg css vars

---
 src/marketing/support/variables.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss
index c6f3178323..9ca98b93ea 100644
--- a/src/marketing/support/variables.scss
+++ b/src/marketing/support/variables.scss
@@ -125,3 +125,18 @@ $marketing-position-variants: (
   md: '-md',
   lg: '-lg',
 ) !default;
+
+$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0,0,0,0.07), 0 7px 5px rgba(0,0,0,0.04), 0 12px 10px rgba(0,0,0,0.03), 0 22px 18px rgba(0,0,0,0.03), 0 42px 33px rgba(0,0,0,0.02), 0 100px 80px rgba(0,0,0,0.02);
+$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0,0,0,0.15), 0 100px 80px rgba(255,255,255,0.02), 0 42px 33px rgba(255,255,255,0.024), 0 22px 18px rgba(255,255,255,0.028), 0 12px 10px rgba(255,255,255,0.034), 0 7px 5px rgba(255,255,255,0.04), 0 3px 2px rgba(255,255,255,0.07);
+
+@include color-variables(
+  (
+    (mktg-btn-shadow-outline, (light: rgb(0,0,0,0.15) 0 0 0 1px inset, dark: rgb(255,255,255,0.25) 0 0 0 1px inset)),
+    (marketing-icon-primary, (light: var(--color-scale-blue-4), dark: var(--color-scale-blue-2))),
+    (marketing-icon-secondary, (light: var(--color-scale-blue-3), dark: var(--color-scale-blue-5))),
+    (mktg-btn-bg, (light: #1b1f23, dark: #f6f8fa)),
+    (mktg-btn-shadow-focus, (light: rgb(0 0 0 / 15%) 0 0 0 4px, dark: rgb(255 255 255 / 25%) 0 0 0 4px)),
+    (mktg-btn-shadow-hover, (light: $mktg-btn-shadow-hover-light, dark: $mktg-btn-shadow-hover-dark)),
+    (mktg-btn-shadow-hover-muted, (light: rgb(0 0 0 / 70%) 0 0 0 2px inset, dark: rgb(255 255 255) 0 0 0 2px inset)),
+  )
+);

From da6c8904bb5dc54b73e30278bd218a40667d869d Mon Sep 17 00:00:00 2001
From: langermank <18661030+langermank@users.noreply.github.com>
Date: Fri, 21 Apr 2023 09:06:10 -0700
Subject: [PATCH 3/3] add mktg tokens

---
 package.json                         |  2 +-
 src/marketing/support/variables.scss |  4 ++--
 src/primitives/index.scss            | 18 +++++++++---------
 src/support/mixins/misc.scss         |  4 ++--
 yarn.lock                            |  8 ++++----
 5 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 38ad0039ee..93bbd6e460 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@changesets/cli": "2.26.1",
     "@github/prettier-config": "0.0.6",
     "@koddsson/postcss-sass": "5.0.1",
-    "@primer/stylelint-config": "0.0.0-20230420153251",
+    "@primer/stylelint-config": "0.0.0-20230420164534",
     "autoprefixer": "10.4.13",
     "chokidar-cli": "3.0.0",
     "cssstats": "4.0.5",
diff --git a/src/marketing/support/variables.scss b/src/marketing/support/variables.scss
index 9ca98b93ea..ba1d9ef1fd 100644
--- a/src/marketing/support/variables.scss
+++ b/src/marketing/support/variables.scss
@@ -126,8 +126,8 @@ $marketing-position-variants: (
   lg: '-lg',
 ) !default;
 
-$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0,0,0,0.07), 0 7px 5px rgba(0,0,0,0.04), 0 12px 10px rgba(0,0,0,0.03), 0 22px 18px rgba(0,0,0,0.03), 0 42px 33px rgba(0,0,0,0.02), 0 100px 80px rgba(0,0,0,0.02);
-$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0,0,0,0.15), 0 100px 80px rgba(255,255,255,0.02), 0 42px 33px rgba(255,255,255,0.024), 0 22px 18px rgba(255,255,255,0.028), 0 12px 10px rgba(255,255,255,0.034), 0 7px 5px rgba(255,255,255,0.04), 0 3px 2px rgba(255,255,255,0.07);
+$mktg-btn-shadow-hover-light: 0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02);
+$mktg-btn-shadow-hover-dark: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07);
 
 @include color-variables(
   (
diff --git a/src/primitives/index.scss b/src/primitives/index.scss
index 3fef3ea2c9..7896941b92 100644
--- a/src/primitives/index.scss
+++ b/src/primitives/index.scss
@@ -1,10 +1,10 @@
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/base/typography/typography';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/border';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/breakpoints';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-coarse';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size-fine';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/size';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/size/viewport';
-@import '@primer/primitives/tokens-v2-private/css/tokens/functional/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/tokens/base/size/size';
+@import '@primer/primitives/tokens-next-private/css/tokens/base/typography/typography';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/border';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/breakpoints';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/size-coarse';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/size-fine';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/size';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/size/viewport';
+@import '@primer/primitives/tokens-next-private/css/tokens/functional/typography/typography';
 @import './temp-typography-tokens.scss';
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 90d4eeb1b9..48c35bf377 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -17,7 +17,7 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
     background-image: linear-gradient($background, $background);
   }
 
@@ -30,7 +30,7 @@
 
 // inset box-shadow for form controls
 @mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+  border-color: var(--fgColor-accent, var(--color-accent-fg));
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
diff --git a/yarn.lock b/yarn.lock
index a29897790b..88f8307ee3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1222,10 +1222,10 @@
   dependencies:
     markdown-table-ts "^1.0.3"
 
-"@primer/stylelint-config@0.0.0-20230420153251":
-  version "0.0.0-20230420153251"
-  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-0.0.0-20230420153251.tgz#5b527c8ccf597105a457b2a8e29eeac16b662e62"
-  integrity sha512-dhsMZ0jxTbXu06qCuIkuEzSxQdfE39Mr9o0fP6pAxFhQKFPYcxvnqtY1PQSvCzicJV3+e4KmOHM0YO9Vp2xL/g==
+"@primer/stylelint-config@0.0.0-20230420164534":
+  version "0.0.0-20230420164534"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-0.0.0-20230420164534.tgz#acca5d97db15f40455c7ddb0d0b1884886109a04"
+  integrity sha512-R0Hv4A7wkgMBJEh9LFKcqgYSLqG8HcIK0pzJSsKFUqXOz6Z7PCqqRPWTehcUKpM/KOfkE4Ps2WFZpv69keXJQg==
   dependencies:
     anymatch "^3.1.1"
     globby "^11.0.1"