From 9204701416b547255a1ebaeb2bd8a20056ffb8d4 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Wed, 21 Jun 2023 13:56:27 -0700
Subject: [PATCH] Use `@primer/primitives` v8 colors with fallbacks (#2466)

* bump

* run stylelint

* lint

* bump release

* Create tidy-brooms-search.md
---
 .changeset/tidy-brooms-search.md     |   5 ++
 package.json                         |   2 +-
 src/autocomplete/suggester.scss      |  22 ++---
 src/avatars/avatar-parent-child.scss |   4 +-
 src/avatars/circle-badge.scss        |   6 +-
 src/base/base.scss                   |  12 +--
 src/base/kbd.scss                    |  10 +--
 src/base/normalize.scss              |   4 +-
 src/box/box-overlay.scss             |   6 +-
 src/branch-name/branch-name.scss     |  12 +--
 src/buttons/button.scss              | 126 +++++++++++++--------------
 src/buttons/misc.scss                |  52 +++++------
 src/color-modes/native.scss          |   6 +-
 src/forms/form-control.scss          |  36 ++++----
 src/forms/form-group.scss            |  58 ++++++------
 src/forms/form-select.scss           |   2 +-
 src/forms/radio-group.scss           |  12 +--
 src/header/header.scss               |  14 +--
 src/layout/app-frame.scss            |  14 +--
 src/layout/page-layout.scss          |   4 +-
 src/layout/stack.scss                |   2 +-
 src/markdown/blob-csv.scss           |   4 +-
 src/markdown/code.scss               |   6 +-
 src/markdown/footnotes.scss          |   6 +-
 src/markdown/headings.scss           |   8 +-
 src/markdown/images.scss             |   6 +-
 src/markdown/markdown-body.scss      |   8 +-
 src/markdown/tables.scss             |   8 +-
 src/marketing/buttons/button.scss    |  19 ++--
 src/navigation/filter-list.scss      |  16 ++--
 src/navigation/sidenav.scss          |  24 ++---
 src/navigation/subnav.scss           |  18 ++--
 src/pagination/pagination.scss       |  14 +--
 src/select-menu/select-menu.scss     |  82 ++++++++---------
 src/support/mixins/misc.scss         |  16 ++--
 src/support/variables/misc.scss      |   4 +-
 src/toasts/toasts.scss               |  34 ++++----
 src/tooltips/tooltips.scss           |  14 +--
 src/utilities/box-shadow.scss        |   8 +-
 src/utilities/colors.scss            | 114 ++++++++++++------------
 src/utilities/details.scss           |   2 +-
 stylelint.config.cjs                 |  10 ++-
 yarn.lock                            |  11 ++-
 43 files changed, 426 insertions(+), 415 deletions(-)
 create mode 100644 .changeset/tidy-brooms-search.md

diff --git a/.changeset/tidy-brooms-search.md b/.changeset/tidy-brooms-search.md
new file mode 100644
index 00000000..07d87b16
--- /dev/null
+++ b/.changeset/tidy-brooms-search.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Use `@primer/primitives` v8 colors with fallbacks
diff --git a/package.json b/package.json
index 0226148d..a0f42577 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "@changesets/cli": "2.26.1",
     "@csstools/postcss-sass": "5.0.1",
     "@github/prettier-config": "0.0.6",
-    "@primer/stylelint-config": "^12.4.0",
+    "@primer/stylelint-config": "^12.7.1",
     "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 87baf4dd..a7f61e0f 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 e3185f80..01a5c712 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 657bbc93..63032cfb 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 6ee57b59..4ebf5f9b 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -4,7 +4,7 @@
 }
 
 *::selection {
-  background-color: var(--color-accent-subtle);
+  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
 }
 
 input,
@@ -20,12 +20,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 {
@@ -50,7 +50,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
 }
 
@@ -65,7 +65,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 f6801b92..c1386105 100644
--- a/src/base/kbd.scss
+++ b/src/base/kbd.scss
@@ -7,13 +7,13 @@ 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);
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
 }
diff --git a/src/base/normalize.scss b/src/base/normalize.scss
index 5621566d..9b38890e 100644
--- a/src/base/normalize.scss
+++ b/src/base/normalize.scss
@@ -153,8 +153,8 @@ h1 {
  */
 
 mark {
-  background-color: var(--color-attention-subtle);
-  color: var(--color-fg-default);
+  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  color: var(--fgColor-default, var(--color-fg-default));
 }
 
 /**
diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss
index ed8f2733..5a82a501 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 600e99b8..c18c746e 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 27563db2..9e967a42 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 {
@@ -62,42 +62,42 @@
 // Default button
 
 .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);
+  color: var(--button-default-fgColor-rest, var(--color-btn-text));
+  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-danger-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 328b2fe2..399392d6 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,22 +165,22 @@
   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);
+  background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    background-color: var(--color-accent-muted);
+    background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
   }
 
   &: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 8b8d5ee0..a7ff089f 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
@@ -18,5 +18,7 @@
   body {
     --color-accent-emphasis: Highlight;
     --color-fg-on-emphasis: LinkText;
+    --fgColor-onEmphasis: LinkText;
+    --fgColor-accent: Highlight;
   }
 }
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index dfb09262..adf211c2 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;
 
@@ -43,20 +43,20 @@
   &.border-0 {
     &:focus,
     &:focus-visible {
-      border: $border-width $border-style var(--color-accent-fg) !important;
+      border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
     }
   }
 
   &[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 109b1b42..873743f4 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);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
 
       &::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);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
 
       &::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);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
 
       &::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 77bbdf5c..9376acb0 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 73e2787b..ad087dd8 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 a53011ad..6aa07f8a 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 d68544f3..1052525c 100644
--- a/src/layout/app-frame.scss
+++ b/src/layout/app-frame.scss
@@ -29,7 +29,7 @@
     display: flex;
     width: 100%;
     padding: var(--base-size-16, 16px);
-    background: var(--color-canvas-inset);
+    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;
@@ -66,7 +66,7 @@
       overflow: hidden;
       text-indent: var(--base-size-128, 128px);
       pointer-events: none;
-      background: var(--color-border-default);
+      background: var(--borderColor-default, var(--color-border-default));
       border-radius: var(--borderRadius-full, 100vh);
     }
 
@@ -78,8 +78,8 @@
       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);
+      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;
 
@@ -95,17 +95,17 @@
 
       @keyframes AppFrame-a11yLink-focus {
         0% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(0.3, 0.25);
         }
 
         50% {
-          color: var(--color-accent-emphasis);
+          color: var(--fgColor-accent, var(--color-accent-emphasis));
           transform: scale(1, 1);
         }
 
         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 5a3625f8..5fc32c84 100644
--- a/src/layout/page-layout.scss
+++ b/src/layout/page-layout.scss
@@ -2,7 +2,7 @@
 // stylelint-disable selector-max-specificity
 // stylelint-disable no-duplicate-selectors
 
-$Layout-divider-color: var(--color-border-default) !default;
+$Layout-divider-color: var(--borderColor-default, var(--color-border-default)) !default;
 $Layout-responsive-variant-max-breakpoint: 'md' !default;
 
 :root {
@@ -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 62af4509..5fad157b 100644
--- a/src/layout/stack.scss
+++ b/src/layout/stack.scss
@@ -30,7 +30,7 @@
   --Stack-gap-whenRegular: #{$Stack-gap-default};
   --Stack-gap-whenNarrow: #{$Stack-gap-default};
   --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
-  --Stack-divider-color: var(--color-border-default);
+  --Stack-divider-color: var(--borderColor-default, var(--color-border-default));
 
   display: flex;
   flex-flow: column;
diff --git a/src/markdown/blob-csv.scss b/src/markdown/blob-csv.scss
index 7374e7b2..02144b05 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 ef9784ed..0bfb2cfc 100644
--- a/src/markdown/code.scss
+++ b/src/markdown/code.scss
@@ -9,7 +9,7 @@
     // stylelint-disable-next-line primer/typography
     font-size: 85%;
     white-space: break-spaces; // keeps rendering spaces, but breaks them onto multiple lines
-    background-color: var(--color-neutral-muted);
+    background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
     border-radius: $border-radius;
 
     br { display: none; }
@@ -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 49278292..7687a99d 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 03a13117..df82bc27 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 5826196e..f4be72b1 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 d9ddf4ad..67d61ed1 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 {
@@ -74,16 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: $spacer-4 0;
-    background-color: var(--color-border-default);
+    background-color: var(--borderColor-default, var(--color-border-default));
     border: 0;
   }
 
   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 0575f149..23d781a4 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/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 5d5ddfef..1df92388 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -1,4 +1,3 @@
-/* stylelint-disable primer/no-deprecated-colors */
 .btn-mktg {
   position: relative;
   z-index: 1;
@@ -9,7 +8,7 @@
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
-  color: var(--color-canvas-default);
+  color: var(--bgColor-default, var(--color-canvas-default));
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -56,7 +55,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -67,7 +66,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 
   &:active {
@@ -85,7 +84,7 @@
 }
 
 .btn-muted-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
@@ -99,17 +98,17 @@
 
   &:active {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+    box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
   }
 
   &:disabled {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+    box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
   }
 }
 
 .btn-subtle-mktg {
-  color: var(--color-fg-default) !important;
+  color: var(--fgColor-default, var(--color-fg-default)) !important;
   background: none !important;
   box-shadow: none !important;
 
@@ -135,7 +134,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -146,7 +145,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--color-accent-fg));
+    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
   }
 }
 
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index 9eac3d8a..489649eb 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 26d8d0a1..7b6a3d05 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;
@@ -25,7 +25,7 @@
   &:last-child {
     // makes sure there is a "bottom border" in case the list is not long enough
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 $border-width 0 var(--color-border-default);
+    box-shadow: 0 $border-width 0 var(--borderColor-default, var(--color-border-default));
   }
 
   // Bar on the left
@@ -45,20 +45,20 @@
 
 .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 {
-    background-color: var(--color-primer-border-active);
+    background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
   }
 }
 
@@ -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 c973d64e..9d366b8a 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 43090b4e..4e297083 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 33365b3b..ea953065 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
@@ -234,7 +234,7 @@ $SelectMenu-max-height: 480px !default;
   overflow-x: auto;
   overflow-y: hidden;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -252,12 +252,12 @@ $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;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
 
   @include breakpoint(sm) {
     flex: none;
@@ -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);
+    box-shadow: 0 0 0 1px var(--borderColor-muted, 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,13 +451,13 @@ $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
   // :active would work if ontouchstart is added to the button
   // Instead this tweaks the "native" highlight color
   .SelectMenu-item {
-    -webkit-tap-highlight-color: var(--color-select-menu-tap-highlight);
+    -webkit-tap-highlight-color: var(--control-bgColor-active, var(--color-select-menu-tap-highlight));
   }
 }
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index 90d4eeb1..0a59b7a8 100644
--- a/src/support/mixins/misc.scss
+++ b/src/support/mixins/misc.scss
@@ -1,5 +1,5 @@
 // Generate a two-color caret for any element.
-@mixin double-caret($background: var(--color-canvas-default), $border: var(--color-border-default)) {
+@mixin double-caret($background: var(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
   &::after,
   &::before {
     position: absolute;
@@ -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);
   }
 
@@ -29,31 +29,31 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--color-accent-fg)) {
-  border-color: var(--color-accent-fg);
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+  border-color: var(--focus-outlineColor, var(--color-accent-fg));
   outline: none;
   box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
 }
 
 // box-shadow for :target styles (no inset)
 // !important to override PCSS utilities
-@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--color-accent-fg)) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
 }
 
 // outline with fg box-shadow for buttons
-@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--color-accent-fg)) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
 }
 
 // if min-width is undefined, return only min-height
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index ac346535..4c6bdb66 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(--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(--borderColor-default, 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 ed1cb21d..9ae014a5 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(--borderColor-default, 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(--borderColor-default, 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(--borderColor-default, 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(--borderColor-default, 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(--borderColor-default, 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 b8eca264..53f469cb 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;
 }
@@ -32,7 +32,7 @@
   display: none;
   width: 0;
   height: 0;
-  color: var(--color-neutral-emphasis-plus);
+  color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   pointer-events: none;
   content: '';
   // stylelint-disable-next-line primer/borders
@@ -101,7 +101,7 @@
     bottom: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-bottom-color: var(--color-neutral-emphasis-plus);
+    border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -134,7 +134,7 @@
     bottom: auto;
     // stylelint-disable-next-line primer/spacing
     margin-right: -6px;
-    border-top-color: var(--color-neutral-emphasis-plus);
+    border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -172,7 +172,7 @@
     left: -7px;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-left-color: var(--color-neutral-emphasis-plus);
+    border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
@@ -192,7 +192,7 @@
     bottom: 50%;
     // stylelint-disable-next-line primer/spacing
     margin-top: -6px;
-    border-right-color: var(--color-neutral-emphasis-plus);
+    border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
   }
 }
 
diff --git a/src/utilities/box-shadow.scss b/src/utilities/box-shadow.scss
index d41f73b4..ccca24a8 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 9f06ef1e..e1eea4dc 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-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(--color-accent-fg) !important; }
-.color-fg-success   { color: var(--color-success-fg) !important; }
-.color-fg-attention { color: var(--color-attention-fg) !important; }
-.color-fg-severe    { color: var(--color-severe-fg) !important; }
-.color-fg-danger    { color: var(--color-danger-fg) !important; }
-.color-fg-open      { color: var(--color-open-fg) !important; }
-.color-fg-closed    { color: var(--color-closed-fg) !important; }
-.color-fg-done      { color: var(--color-done-fg) !important; }
-.color-fg-sponsors  { color: var(--color-sponsors-fg) !important; }
+.color-fg-accent    { 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(--color-fg-on-emphasis) !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 df25180e..00d6f11d 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/stylelint.config.cjs b/stylelint.config.cjs
index 6f1df8cd..ec4be25e 100644
--- a/stylelint.config.cjs
+++ b/stylelint.config.cjs
@@ -2,6 +2,12 @@ module.exports = {
   extends: ['@primer/stylelint-config'],
   ignoreFiles: ['**/*.js', '**/*.cjs'],
   rules: {
-    'primer/no-override': false
-  }
+    'primer/no-override': false,
+    'primer/no-deprecated-colors': [
+      true,
+      {
+        inlineFallback: true,
+      },
+    ],
+  },
 }
diff --git a/yarn.lock b/yarn.lock
index f98108be..48b1cb12 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -980,14 +980,13 @@
   resolved "https://registry.yarnpkg.com/@primer/primitives/-/primitives-7.11.12.tgz#1a36354e789f8cc3c178b66b2d100b64d4fb209d"
   integrity sha512-AvTiuLHvvby2KPZbwwJ7GrtRJYgWyepF6XAOMw7G7Kc2iP3E32OHmaFukwh3gY+OqwcxY7st2tHWll2brk1vfQ==
 
-"@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@^12.7.1":
+  version "12.7.1"
+  resolved "https://registry.yarnpkg.com/@primer/stylelint-config/-/stylelint-config-12.7.1.tgz#b98f428957bd53867d248b463f2221c174afd606"
+  integrity sha512-jHuxjRpyZ0K02kwz+SUpw/cBMnU67AzPhC2FSj9dEq8hZTZHnyN2tN/CQk3C4I/5Mlgc8y1cl+x0FKXjO15dQQ==
   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"
@@ -3975,7 +3974,7 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
-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 sha512-N8XRTIMMqqDgSy4VLKPnJ/+hpGZN+PHQiJnSenYqPaVV/NCqEogTnAdZLQiGKhxX+JCs8waWq2t1XHWKOmlY8g==