diff --git a/.changeset/wise-ducks-promise.md b/.changeset/wise-ducks-promise.md
new file mode 100644
index 0000000000..280f3654dc
--- /dev/null
+++ b/.changeset/wise-ducks-promise.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": major
+---
+
+- Remove legacy color variables
diff --git a/src/autocomplete/suggester.scss b/src/autocomplete/suggester.scss
index 9e6d5c8a9b..c97ec69af8 100644
--- a/src/autocomplete/suggester.scss
+++ b/src/autocomplete/suggester.scss
@@ -11,20 +11,20 @@
   margin-top: var(--base-size-24);
   list-style: none;
   cursor: pointer;
-  background: var(--overlay-bgColor, var(--color-canvas-overlay));
-  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  background: var(--overlay-bgColor);
+  border: $border-width $border-style var(--borderColor-default);
   border-radius: $border-radius;
-  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+  box-shadow: var(--shadow-resting-medium);
 
   li {
     display: block;
     padding: var(--base-size-4) var(--base-size-8);
     font-weight: $font-weight-semibold;
-    border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+    border-bottom: $border-width $border-style var(--borderColor-muted);
 
     small {
       font-weight: $font-weight-normal;
-      color: var(--fgColor-muted, var(--color-fg-muted));
+      color: var(--fgColor-muted);
     }
 
     &:last-child {
@@ -39,12 +39,12 @@
     }
 
     &:hover {
-      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      color: var(--fgColor-onEmphasis);
       text-decoration: none;
-      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      background: var(--bgColor-accent-emphasis);
 
       small {
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+        color: var(--fgColor-onEmphasis);
       }
 
       .octicon {
@@ -54,12 +54,12 @@
 
     &[aria-selected='true'],
     &.navigation-focus {
-      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+      color: var(--fgColor-onEmphasis);
       text-decoration: none;
-      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      background: var(--bgColor-accent-emphasis);
 
       small {
-        color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+        color: var(--fgColor-onEmphasis);
       }
 
       .octicon {
diff --git a/src/avatars/avatar-parent-child.scss b/src/avatars/avatar-parent-child.scss
index 01a5c7127e..2c8792cfa4 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(--bgColor-default, var(--color-canvas-default)); // For transparent backgrounds
+  background-color: var(--bgColor-default); // For transparent backgrounds
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius-1;
-  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
+  box-shadow: var(--avatar-shadow);
 }
diff --git a/src/avatars/circle-badge.scss b/src/avatars/circle-badge.scss
index 63032cfb63..bdf365bc8f 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(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-default);
   border-radius: 50%;
-  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium));
+  box-shadow: var(--shadow-resting-medium);
 }
 
 .CircleBadge-icon {
@@ -46,7 +46,7 @@
     width: 100%;
     content: '';
     // stylelint-disable-next-line primer/borders
-    border-bottom: 2px dashed var(--borderColor-default, var(--color-border-default));
+    border-bottom: 2px dashed var(--borderColor-default);
   }
 
   .CircleBadge {
diff --git a/src/base/base.scss b/src/base/base.scss
index 5d123ef253..d886d15713 100644
--- a/src/base/base.scss
+++ b/src/base/base.scss
@@ -16,12 +16,12 @@ body {
   font-family: $body-font;
   font-size: var(--body-font-size, $body-font-size);
   line-height: $body-line-height;
-  color: var(--fgColor-default, var(--color-fg-default));
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
 }
 
 a {
-  color: var(--fgColor-accent, var(--color-accent-fg));
+  color: var(--fgColor-accent);
   text-decoration: none;
 
   &:hover {
@@ -46,7 +46,7 @@ label {
 
 // Custom styling for HTML5 validation bubbles (WebKit only)
 ::placeholder {
-  color: var(--fgColor-muted, var(--color-fg-subtle));
+  color: var(--fgColor-muted);
   opacity: 1; // override opacity in normalize.css
 }
 
@@ -61,7 +61,7 @@ hr,
   overflow: hidden;
   background: transparent;
   border: 0;
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 
   @include clearfix();
 }
diff --git a/src/base/kbd.scss b/src/base/kbd.scss
index 3db5d5dff4..21a32f7945 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(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   vertical-align: middle;
-  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  background-color: var(--bgColor-muted);
   // stylelint-disable-next-line primer/borders
-  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: $border-style $border-width var(--borderColor-neutral-muted);
+  border-bottom-color: var(--borderColor-neutral-muted);
   border-radius: $border-radius;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted, var(--color-neutral-muted));
+  box-shadow: inset 0 -1px 0 var(--borderColor-neutral-muted);
 }
diff --git a/src/base/native-colors.scss b/src/base/native-colors.scss
index a7ff089fc7..075aada1fe 100644
--- a/src/base/native-colors.scss
+++ b/src/base/native-colors.scss
@@ -6,8 +6,8 @@
 @include color-mode(dark) { color-scheme: dark; }
 
 [data-color-mode] {
-  color: var(--fgColor-default, var(--color-fg-default));
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
 }
 
 // Windows High Contrast mode
@@ -16,8 +16,6 @@
 // stylelint-disable selector-max-type
 @media (forced-colors: active) {
   body {
-    --color-accent-emphasis: Highlight;
-    --color-fg-on-emphasis: LinkText;
     --fgColor-onEmphasis: LinkText;
     --fgColor-accent: Highlight;
   }
diff --git a/src/base/normalize.scss b/src/base/normalize.scss
index 84eaa33891..6497a96118 100644
--- a/src/base/normalize.scss
+++ b/src/base/normalize.scss
@@ -153,8 +153,8 @@ h1 {
  */
 
 mark {
-  background-color: var(--bgColor-attention-muted, var(--color-attention-subtle));
-  color: var(--fgColor-default, var(--color-fg-default));
+  background-color: var(--bgColor-attention-muted);
+  color: var(--fgColor-default);
 }
 
 /**
diff --git a/src/box/box-overlay.scss b/src/box/box-overlay.scss
index 5fd710c8ff..b211f38ce5 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(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-default);
   background-clip: padding-box;
-  border-color: var(--borderColor-default, var(--color-border-default));
+  border-color: var(--borderColor-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: var(--base-size-8);
     margin: 0;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     text-align: center;
   }
 }
diff --git a/src/branch-name/branch-name.scss b/src/branch-name/branch-name.scss
index c18c746e50..d3c06a44cf 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(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   word-break: break-all;
-  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  background-color: var(--bgColor-accent-muted);
   border-radius: $border-radius;
 
   .octicon {
     // stylelint-disable-next-line primer/spacing
     margin: 1px -2px 0 0;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
   }
 }
 
 // When a branch name is a link
 
 a.branch-name {
-  color: var(--fgColor-accent, var(--color-accent-fg));
-  background-color: var(--bgColor-accent-muted, var(--color-accent-subtle));
+  color: var(--fgColor-accent);
+  background-color: var(--bgColor-accent-muted);
 
   .octicon {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
   }
 }
diff --git a/src/buttons/button.scss b/src/buttons/button.scss
index bf3995ade5..321e4d40cf 100644
--- a/src/buttons/button.scss
+++ b/src/buttons/button.scss
@@ -36,7 +36,7 @@
 
   .octicon {
     margin-right: var(--base-size-4);
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     vertical-align: text-bottom;
 
     &:only-child {
@@ -50,7 +50,7 @@
     color: inherit;
     text-shadow: none;
     vertical-align: top;
-    background-color: var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));
+    background-color: var(--buttonCounter-default-bgColor-rest);
   }
 
   .dropdown-caret {
@@ -62,42 +62,42 @@
 // Default button
 
 .btn {
-  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));
+  color: var(--button-default-fgColor-rest);
+  background-color: var(--button-default-bgColor-rest);
+  border-color: var(--button-default-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
   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(--button-default-bgColor-hover, var(--color-btn-hover-bg));
-    border-color: var(--button-default-borderColor-hover, var(--color-btn-hover-border));
+    background-color: var(--button-default-bgColor-hover);
+    border-color: var(--button-default-borderColor-hover);
     transition-duration: 0.1s;
   }
 
   &:active {
-    background-color: var(--button-default-bgColor-active, var(--color-btn-active-bg));
-    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
+    background-color: var(--button-default-bgColor-active);
+    border-color: var(--button-default-borderColor-active);
     transition: none;
   }
 
   &.selected,
   &[aria-selected='true'] {
-    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
-    box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
+    background-color: var(--button-default-bgColor-selected);
+    box-shadow: var(--shadow-inset);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
-    background-color: var(--button-default-bgColor-disabled, var(--color-btn-bg));
-    border-color: var(--button-default-borderColor-disabled, var(--color-btn-border));
+    color: var(--fgColor-disabled);
+    background-color: var(--button-default-bgColor-disabled);
+    border-color: var(--button-default-borderColor-disabled);
 
     .octicon {
-      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--fgColor-disabled);
     }
   }
 }
@@ -105,16 +105,16 @@
 // Primary button
 
 .btn-primary {
-  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));
+  color: var(--button-primary-fgColor-rest);
+  background-color: var(--button-primary-bgColor-rest);
+  border-color: var(--button-primary-borderColor-rest);
+  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
   &:hover,
   &.hover,
   [open] > & {
-    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));
+    background-color: var(--button-primary-bgColor-hover);
+    border-color: var(--button-primary-borderColor-hover);
   }
 
   // fallback :focus state
@@ -136,29 +136,29 @@
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    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));
+    background-color: var(--button-primary-bgColor-active);
+    box-shadow: var(--button-primary-shadow-selected);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    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));
+    color: var(--button-primary-fgColor-disabled);
+    background-color: var(--button-primary-bgColor-disabled);
+    border-color: var(--button-primary-borderColor-disabled);
 
     .octicon {
-      color: var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));
+      color: var(--button-primary-fgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));
+    background-color: var(--buttonCounter-primary-bgColor-rest);
   }
 
   .octicon {
-    color: var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));
+    color: var(--button-primary-iconColor-rest);
   }
 }
 
@@ -185,17 +185,17 @@ a.btn-primary {
 // Outline button
 
 .btn-outline {
-  color: var(--button-outline-fgColor-rest, var(--color-btn-outline-text));
+  color: var(--button-outline-fgColor-rest);
 
   &:hover,
   [open] > & {
-    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));
+    color: var(--button-outline-fgColor-hover);
+    background-color: var(--button-outline-bgColor-hover);
+    border-color: var(--button-outline-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
     .Counter {
-      background-color: var(--buttonCounter-outline-bgColor-hover, var(--color-btn-outline-hover-counter-bg));
+      background-color: var(--buttonCounter-outline-bgColor-hover);
     }
 
     .octicon {
@@ -206,10 +206,10 @@ a.btn-primary {
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    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));
+    color: var(--button-outline-fgColor-active);
+    background-color: var(--button-outline-bgColor-active);
+    border-color: var(--button-outline-borderColor-active);
+    box-shadow: var(--button-outline-shadow-selected);
 
     // fallback :focus state
     &:focus {
@@ -231,76 +231,76 @@ a.btn-primary {
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    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));
+    color: var(--button-outline-fgColor-disabled);
+    background-color: var(--button-outline-bgColor-disabled);
+    border-color: var(--button-default-borderColor-rest);
     box-shadow: none;
 
     .Counter {
-      background-color: var(--buttonCounter-outline-bgColor-disabled, var(--color-btn-outline-disabled-counter-bg));
+      background-color: var(--buttonCounter-outline-bgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-outline-bgColor-rest, var(--color-btn-outline-counter-bg));
+    background-color: var(--buttonCounter-outline-bgColor-rest);
   }
 }
 
 // Danger button
 
 .btn-danger {
-  color: var(--button-danger-fgColor-rest, var(--color-btn-danger-text));
+  color: var(--button-danger-fgColor-rest);
 
   .octicon {
-    color: var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));
+    color: var(--button-danger-iconColor-rest);
   }
 
   &:hover,
   [open] > & {
-    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));
+    color: var(--button-danger-fgColor-hover);
+    background-color: var(--button-danger-bgColor-hover);
+    border-color: var(--button-danger-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
     .Counter {
-      background-color: var(--buttonCounter-danger-bgColor-hover, var(--color-btn-danger-hover-counter-bg));
+      background-color: var(--buttonCounter-danger-bgColor-hover);
     }
 
     .octicon {
-      color: var(--button-danger-iconColor-hover, var(--color-btn-danger-hover-icon));
+      color: var(--button-danger-iconColor-hover);
     }
   }
 
   &:active,
   &.selected,
   &[aria-selected='true'] {
-    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));
+    color: var(--button-danger-fgColor-active);
+    background-color: var(--button-danger-bgColor-active);
+    border-color: var(--button-danger-borderColor-active);
+    box-shadow: var(--button-danger-shadow-selected);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    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));
+    color: var(--button-danger-fgColor-disabled);
+    background-color: var(--button-danger-bgColor-disabled);
+    border-color: var(--button-default-borderColor-rest);
     box-shadow: none;
 
     .Counter {
-      background-color: var(--buttonCounter-danger-bgColor-disabled, var(--color-btn-danger-disabled-counter-bg));
+      background-color: var(--buttonCounter-danger-bgColor-disabled);
     }
 
     .octicon {
-      color: var(--button-danger-fgColor-disabled, var(--color-btn-danger-disabled-text));
+      color: var(--button-danger-fgColor-disabled);
     }
   }
 
   .Counter {
     color: inherit;
-    background-color: var(--buttonCounter-danger-bgColor-rest, var(--color-btn-danger-counter-bg));
+    background-color: var(--buttonCounter-danger-bgColor-rest);
   }
 }
 
diff --git a/src/buttons/misc.scss b/src/buttons/misc.scss
index 904c457b6a..5d96fcac22 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(--fgColor-accent, var(--color-accent-fg));
+  color: var(--fgColor-accent);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -24,7 +24,7 @@
   &[aria-disabled='true'] {
     &,
     &:hover {
-      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--fgColor-disabled);
       cursor: default;
     }
   }
@@ -42,7 +42,7 @@
 //
 // Typically used as a "cancel" button next to a .btn
 .btn-invisible {
-  color: var(--fgColor-accent, var(--color-accent-fg));
+  color: var(--fgColor-accent);
   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(--fgColor-accent, var(--color-accent-fg));
-    background-color: var(--button-default-bgColor-hover, var(--color-btn-hover-bg));
+    color: var(--fgColor-accent);
+    background-color: var(--button-default-bgColor-hover);
     outline: none;
     box-shadow: none;
   }
@@ -60,21 +60,21 @@
   &.selected,
   &[aria-selected='true'],
   &.zeroclipboard-is-active {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
     background: none;
-    border-color: var(--button-default-borderColor-active, var(--color-btn-active-border));
+    border-color: var(--button-default-borderColor-active);
 
     @include focusOutline;
   }
 
   &:active &.zeroclipboard-is-active {
-    background-color: var(--button-default-bgColor-selected, var(--color-btn-selected-bg));
+    background-color: var(--button-default-bgColor-selected);
   }
 
   &:disabled,
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    color: var(--fgColor-disabled);
     background-color: transparent;
   }
 }
@@ -89,7 +89,7 @@
   // stylelint-disable-next-line primer/spacing
   margin-left: 5px;
   line-height: $lh-condensed-ultra;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   vertical-align: middle;
 
   // For `<button>` elements
@@ -98,7 +98,7 @@
   box-shadow: none;
 
   &:hover {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
   }
 
   &:focus,
@@ -108,17 +108,17 @@
 
   &.disabled,
   &[aria-disabled='true'] {
-    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    color: var(--fgColor-disabled);
     cursor: default;
 
     &:hover {
-      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--fgColor-disabled);
     }
   }
 }
 
 .btn-octicon-danger:hover {
-  color: var(--fgColor-danger, var(--color-danger-fg));
+  color: var(--fgColor-danger);
 }
 
 // Close button
@@ -126,12 +126,12 @@
 // Typically used with an octicon-x
 .close-button {
   padding: 0;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   background: transparent;
   border: 0;
 
   &:hover {
-    color: var(--fgColor-default, var(--color-fg-default));
+    color: var(--fgColor-default);
   }
 
   &:active {
@@ -166,22 +166,22 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 6px;
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   text-decoration: none;
   vertical-align: middle;
-  background: var(--bgColor-neutral-muted, var(--color-neutral-muted));
+  background: var(--bgColor-neutral-muted);
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 1px;
 
   &:hover {
     text-decoration: none;
-    background-color: var(--bgColor-accent-muted, var(--color-accent-muted));
+    background-color: var(--bgColor-accent-muted);
   }
 
   &:active {
-    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
   }
 }
 
@@ -211,14 +211,14 @@
   font-weight: $font-weight-bold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   vertical-align: middle;
-  background-color: var(--bgColor-default, var(--color-canvas-default));
-  border: $border-width $border-style var(--button-default-borderColor-rest, var(--color-btn-border));
+  background-color: var(--bgColor-default);
+  border: $border-width $border-style var(--button-default-borderColor-rest);
   border-left: 0;
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
-  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)), var(--shadow-highlight, var(--color-primer-shadow-highlight));
+  box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
 
   &:hover,
   &:active {
@@ -226,7 +226,7 @@
   }
 
   &:hover {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
     cursor: pointer;
   }
 }
diff --git a/src/color-modes/index.scss b/src/color-modes/index.scss
deleted file mode 100644
index 20d832259c..0000000000
--- a/src/color-modes/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// All themes
-
-@import './themes/light.scss';
-@import './themes/light_colorblind.scss';
-@import './themes/light_high_contrast.scss';
-@import './themes/light_tritanopia.scss';
-@import './themes/dark.scss';
-@import './themes/dark_dimmed.scss';
-@import './themes/dark_high_contrast.scss';
-@import './themes/dark_colorblind.scss';
-@import './themes/dark_tritanopia.scss';
diff --git a/src/color-modes/themes/dark.scss b/src/color-modes/themes/dark.scss
deleted file mode 100644
index e54694bdfd..0000000000
--- a/src/color-modes/themes/dark.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/dark.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/dark_colorblind.scss b/src/color-modes/themes/dark_colorblind.scss
deleted file mode 100644
index c6fde58572..0000000000
--- a/src/color-modes/themes/dark_colorblind.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/dark-colorblind.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/dark_dimmed.scss b/src/color-modes/themes/dark_dimmed.scss
deleted file mode 100644
index a9d27c02d0..0000000000
--- a/src/color-modes/themes/dark_dimmed.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/dark-dimmed.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/dark_high_contrast.scss b/src/color-modes/themes/dark_high_contrast.scss
deleted file mode 100644
index 1f5465581d..0000000000
--- a/src/color-modes/themes/dark_high_contrast.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/dark-high-contrast.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/dark_tritanopia.scss b/src/color-modes/themes/dark_tritanopia.scss
deleted file mode 100644
index bf445751be..0000000000
--- a/src/color-modes/themes/dark_tritanopia.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/dark-tritanopia.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/light.scss b/src/color-modes/themes/light.scss
deleted file mode 100644
index 805d12427d..0000000000
--- a/src/color-modes/themes/light.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/light.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/light_colorblind.scss b/src/color-modes/themes/light_colorblind.scss
deleted file mode 100644
index 7a39eb3f19..0000000000
--- a/src/color-modes/themes/light_colorblind.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/light-colorblind.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/light_high_contrast.scss b/src/color-modes/themes/light_high_contrast.scss
deleted file mode 100644
index a6799fc8bc..0000000000
--- a/src/color-modes/themes/light_high_contrast.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/light-high-contrast.css';
\ No newline at end of file
diff --git a/src/color-modes/themes/light_tritanopia.scss b/src/color-modes/themes/light_tritanopia.scss
deleted file mode 100644
index 57c1f458cb..0000000000
--- a/src/color-modes/themes/light_tritanopia.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import '@primer/primitives/dist/css/functional/themes/light-tritanopia.css';
\ No newline at end of file
diff --git a/src/docs.scss b/src/docs.scss
index fdf7828f07..c8c5bd73bd 100644
--- a/src/docs.scss
+++ b/src/docs.scss
@@ -8,9 +8,6 @@
 // Docs styles
 // Only meant for the docs at https://primer.style/css
 
-// CSS color variables
-@import './color-modes/index.scss';
-
 // Global requirements
 @import './core/index.scss';
 @import './product/index.scss';
diff --git a/src/forms/form-control.scss b/src/forms/form-control.scss
index 9b5ab8ddfa..ba9ab6e4de 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(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   vertical-align: middle;
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-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(--control-borderColor-rest, var(--color-border-default));
+  border: $border-width $border-style var(--control-borderColor-rest);
   border-radius: $border-radius;
-  box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
+  box-shadow: var(--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(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
+      border: $border-width $border-style var(--borderColor-accent-emphasis) !important;
     }
   }
 
   &[disabled],
   fieldset[disabled] & {
-    color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
-    background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
-    border-color: var(--control-borderColor-disabled, var(--color-border-default));
-    -webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
+    color: var(--control-fgColor-disabled);
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    -webkit-text-fill-color: var(--control-fgColor-disabled); // Fix for Safari
     opacity: 1; // Fix for Safari iOS
 
     &::placeholder {
-      color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--control-fgColor-disabled);
     }
   }
 
@@ -79,10 +79,10 @@ textarea.form-control {
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: var(--bgColor-muted, var(--color-canvas-inset));
+  background-color: var(--bgColor-muted);
 
   &:focus {
-    background-color: var(--bgColor-default, var(--color-canvas-default));
+    background-color: var(--bgColor-default);
   }
 }
 
@@ -142,7 +142,7 @@ textarea.form-control {
       // stylelint-disable-next-line primer/spacing
       padding: 2px var(--base-size-4);
       font-style: normal;
-      background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+      background: var(--bgColor-attention-muted);
       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(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
   }
 }
 
@@ -199,7 +199,7 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: var(--fgColor-muted, var(--color-fg-muted));
+        color: var(--fgColor-muted);
       }
 
       img {
@@ -252,9 +252,9 @@ input::-webkit-inner-spin-button {
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
   font-size: $h5-size;
-  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));
+  color: var(--fgColor-attention);
+  background: var(--bgColor-attention-muted);
+  border: $border-width $border-style var(--borderColor-attention-emphasis);
   border-radius: $border-radius;
 
   p {
diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss
index 8814e6aa94..7dbc7f757b 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(--bgColor-default, var(--color-canvas-default));
+      background-color: var(--bgColor-default);
     }
   }
 
@@ -28,10 +28,10 @@
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: var(--bgColor-muted, var(--color-canvas-inset));
+    background-color: var(--bgColor-muted);
 
     &:focus {
-      background-color: var(--bgColor-default, var(--color-canvas-default));
+      background-color: var(--bgColor-default);
     }
 
     &.shorter {
@@ -98,11 +98,11 @@
       margin: var(--base-size-4) 0 0;
 
       &.is-error {
-        color: var(--fgColor-danger, var(--color-danger-fg));
+        color: var(--fgColor-danger);
       }
 
       &.is-success {
-        color: var(--fgColor-success, var(--color-success-fg));
+        color: var(--fgColor-success);
       }
 
       + .note {
@@ -121,7 +121,7 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: var(--fgColor-danger, var(--color-danger-fg));
+      color: var(--fgColor-danger);
       content: '*';
     }
   }
@@ -154,7 +154,7 @@
   &.successful {
     .success {
       display: inline;
-      color: var(--fgColor-success, var(--color-success-fg));
+      color: var(--fgColor-success);
     }
   }
 
@@ -211,63 +211,63 @@
 
   &.successed {
     .success {
-      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));
+      color: var(--fgColor-default);
+      background-color: var(--bgColor-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted)));
+      border-color: var(--borderColor-success-muted);
 
       &::after {
-        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
+        border-bottom-color: var(--borderColor-success-muted);
       }
 
       &::before {
-        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
+        border-bottom-color: var(--borderColor-success-muted);
       }
     }
   }
 
   &.warn {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+      border-color: var(--borderColor-attention-emphasis);
     }
 
     .warning {
-      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));
+      color: var(--fgColor-default);
+      background-color: var(--bgColor-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted)));
+      border-color: var(--borderColor-attention-muted);
 
       &::after {
-        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
+        border-bottom-color: var(--borderColor-attention-muted);
       }
 
       &::before {
-        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
+        border-bottom-color: var(--borderColor-attention-muted);
       }
     }
   }
 
   &.errored {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
+      border-color: var(--borderColor-danger-emphasis);
     }
 
     label {
-      color: var(--fgColor-danger, var(--color-danger-fg));
+      color: var(--fgColor-danger);
     }
 
     .error {
-      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));
+      color: var(--fgColor-default);
+      background-color: var(--bgColor-default); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted)));
+      border-color: var(--borderColor-danger-muted);
 
       &::after {
-        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
+        border-bottom-color: var(--borderColor-danger-muted);
       }
 
       &::before {
-        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
+        border-bottom-color: var(--borderColor-danger-muted);
       }
     }
   }
@@ -279,7 +279,7 @@
   // stylelint-disable-next-line primer/spacing
   margin: var(--base-size-4) 0 2px;
   font-size: $font-size-small;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
 
   .spinner {
     // stylelint-disable-next-line primer/spacing
diff --git a/src/forms/form-select.scss b/src/forms/form-select.scss
index 551664e98b..cc5c9534e4 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: var(--base-size-24);
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  background-color: var(--bgColor-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/input-group.scss b/src/forms/input-group.scss
index b104e193d8..7d7ddf25cb 100644
--- a/src/forms/input-group.scss
+++ b/src/forms/input-group.scss
@@ -56,7 +56,7 @@
 
 .input-group .form-control:first-child,
 .input-group-button:first-child .btn:not(.btn-primary) {
-  border-color: var(--control-borderColor-rest, var(--color-border-default));
+  border-color: var(--control-borderColor-rest);
 }
 
 .input-group-button:first-child .btn {
@@ -72,7 +72,7 @@
 
 .input-group .form-control:last-child,
 .input-group-button:last-child .btn:not(.btn-primary) {
-  border-color: var(--control-borderColor-rest, var(--color-border-default));
+  border-color: var(--control-borderColor-rest);
 }
 
 .input-group-button:last-child .btn {
diff --git a/src/forms/radio-group.scss b/src/forms/radio-group.scss
index 8e7acae2cb..b2d1c0baa4 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(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   cursor: pointer;
-  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
+  border: $border-width $border-style var(--borderColor-default);
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+    border-color: var(--borderColor-accent-emphasis);
   }
 
   &:first-of-type {
@@ -36,7 +36,7 @@
 
   .octicon {
     margin-left: var(--base-size-4);
-    color: var(--fgColor-muted, var(--color-fg-subtle));
+    color: var(--fgColor-muted);
   }
 }
 
@@ -50,9 +50,9 @@
     position: relative; // enables z-index
 
     + .radio-label {
-      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+      color: var(--fgColor-disabled);
       cursor: default;
-      background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+      background-color: var(--bgColor-neutral-muted);
 
       .octicon {
         color: inherit;
diff --git a/src/header/header.scss b/src/header/header.scss
index d299090dd2..507c1add0e 100644
--- a/src/header/header.scss
+++ b/src/header/header.scss
@@ -4,8 +4,8 @@
   padding: var(--base-size-16);
   font-size: $h5-size;
   line-height: $lh-default;
-  color: var(--header-fgColor-default, var(--color-header-text));
-  background-color: var(--header-bgColor, var(--color-header-bg));
+  color: var(--header-fgColor-default);
+  background-color: var(--header-bgColor);
   align-items: center;
   flex-wrap: nowrap;
 }
@@ -24,20 +24,20 @@
 
 .Header-link {
   font-weight: $font-weight-bold;
-  color: var(--header-fgColor-logo, var(--color-header-logo));
+  color: var(--header-fgColor-logo);
   white-space: nowrap;
 
   &:hover,
   &:focus {
-    color: var(--header-fgColor-default, var(--color-header-text));
+    color: var(--header-fgColor-default);
     text-decoration: none;
   }
 }
 
 .Header-input {
-  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));
+  color: var(--header-fgColor-default);
+  background-color: var(--headerSearch-bgColor);
+  border: $border-width $border-style var(--headerSearch-borderColor);
   box-shadow: none;
 
   &::placeholder {
diff --git a/src/index.scss b/src/index.scss
index 3162442eba..efcfb67965 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -10,9 +10,6 @@
 // Imports all Primer files in their intended order for easy mass-inclusion.
 // Should you need specific files, you can easily use separate `@import`s.
 
-// CSS color variables
-@import './color-modes/index.scss';
-
 // Global requirements
 @import './core/index.scss';
 @import './product/index.scss';
diff --git a/src/layout/app-frame.scss b/src/layout/app-frame.scss
index 586c66edea..f0b24c6fdc 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(--bgColor-inset, var(--color-canvas-inset));
+    background: var(--bgColor-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(--borderColor-default, var(--color-border-default));
+      background: var(--borderColor-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(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-      background: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      color: var(--fgColor-onEmphasis);
+      background: var(--bgColor-accent-emphasis);
       border-radius: var(--borderRadius-full, 100vh);
       align-items: center;
 
@@ -95,17 +95,17 @@
 
       @keyframes AppFrame-a11yLink-focus {
         0% {
-          color: var(--fgColor-accent, var(--color-accent-emphasis));
+          color: var(--fgColor-accent);
           transform: scale(0.3, 0.25);
         }
 
         50% {
-          color: var(--fgColor-accent, var(--color-accent-emphasis));
+          color: var(--fgColor-accent);
           transform: scale(1, 1);
         }
 
         55% {
-          color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+          color: var(--fgColor-onEmphasis);
         }
 
         100% {
diff --git a/src/layout/page-layout.scss b/src/layout/page-layout.scss
index 31bf51cf83..d95eadc3ce 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(--borderColor-default, var(--color-border-default)) !default;
+$Layout-divider-color: var(--borderColor-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: var(--base-size-8);
   content: '';
-  background-color: var(--bgColor-inset, var(--color-canvas-inset));
+  background-color: var(--bgColor-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 5fad157bbc..2e213d48c1 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(--borderColor-default, var(--color-border-default));
+  --Stack-divider-color: var(--borderColor-default);
 
   display: flex;
   flex-flow: column;
diff --git a/src/markdown/blob-csv.scss b/src/markdown/blob-csv.scss
index 7ff632c126..43f5698d4f 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 var(--base-size-8) 9px;
     text-align: right;
-    background: var(--bgColor-default, var(--color-canvas-default));
+    background: var(--bgColor-default);
     border: 0;
   }
 
@@ -23,7 +23,7 @@
 
   th {
     font-weight: $font-weight-bold;
-    background: var(--bgColor-muted, var(--color-canvas-subtle));
+    background: var(--bgColor-muted);
     border-top: 0;
   }
 }
diff --git a/src/markdown/code.scss b/src/markdown/code.scss
index b0e7395662..959011a874 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(--bgColor-neutral-muted, var(--color-neutral-muted));
+    background-color: var(--bgColor-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(--fgColor-default, var(--color-fg-default));
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-muted);
     border-radius: $border-radius;
   }
 
diff --git a/src/markdown/footnotes.scss b/src/markdown/footnotes.scss
index 7a48a0d636..9ef2f3a7cc 100644
--- a/src/markdown/footnotes.scss
+++ b/src/markdown/footnotes.scss
@@ -14,7 +14,7 @@
 
   .footnotes {
     font-size: $h6-size;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     border-top: $border;
 
     ol {
@@ -40,12 +40,12 @@
       pointer-events: none;
       content: '';
       // stylelint-disable-next-line primer/borders
-      border: 2px $border-style var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
+      border: 2px $border-style var(--borderColor-accent-emphasis);
       border-radius: $border-radius;
     }
 
     li:target {
-      color: var(--fgColor-default, var(--color-fg-default));
+      color: var(--fgColor-default);
     }
 
     .data-footnote-backref g-emoji {
diff --git a/src/markdown/headings.scss b/src/markdown/headings.scss
index e7a8968448..a9847a5f5e 100644
--- a/src/markdown/headings.scss
+++ b/src/markdown/headings.scss
@@ -15,7 +15,7 @@
     line-height: $lh-condensed;
 
     .octicon-link {
-      color: var(--fgColor-default, var(--color-fg-default));
+      color: var(--fgColor-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(--borderColor-muted, var(--color-border-muted));
+    border-bottom: $border-width $border-style var(--borderColor-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(--borderColor-muted, var(--color-border-muted));
+    border-bottom: $border-width $border-style var(--borderColor-muted);
   }
 
   h3 {
@@ -69,7 +69,7 @@
   h6 {
     // stylelint-disable-next-line primer/typography
     font-size: 0.85em;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
   }
 
   summary {
diff --git a/src/markdown/images.scss b/src/markdown/images.scss
index f4be72b1c0..a70d8d6ba7 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(--bgColor-default, var(--color-canvas-default));
+    background-color: var(--bgColor-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(--borderColor-default, var(--color-border-default));
+      border: $border-width $border-style var(--borderColor-default);
     }
 
     span img {
@@ -57,7 +57,7 @@
       // stylelint-disable-next-line primer/spacing
       padding: 5px 0 0;
       clear: both;
-      color: var(--fgColor-default, var(--color-fg-default));
+      color: var(--fgColor-default);
     }
   }
 
diff --git a/src/markdown/markdown-body.scss b/src/markdown/markdown-body.scss
index 63ecd771f1..33d2ada237 100644
--- a/src/markdown/markdown-body.scss
+++ b/src/markdown/markdown-body.scss
@@ -43,7 +43,7 @@
 
   // Link Colors
   .absent {
-    color: var(--fgColor-danger, var(--color-danger-fg));
+    color: var(--fgColor-danger);
   }
 
   .anchor {
@@ -74,16 +74,16 @@
     height: $em-spacer-3;
     padding: 0;
     margin: var(--base-size-24) 0;
-    background-color: var(--borderColor-default, var(--color-border-default));
+    background-color: var(--borderColor-default);
     border: 0;
   }
 
   blockquote {
     // stylelint-disable-next-line primer/spacing
     padding: 0 1em;
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     // stylelint-disable-next-line primer/borders
-    border-left: 0.25em $border-style var(--borderColor-default, var(--color-border-default));
+    border-left: 0.25em $border-style var(--borderColor-default);
 
     > :first-child {
       margin-top: 0;
diff --git a/src/markdown/tables.scss b/src/markdown/tables.scss
index 23d781a4c5..b8032394cb 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(--borderColor-default, var(--color-border-default));
+      border: $border-width $border-style var(--borderColor-default);
     }
 
     td {
@@ -27,11 +27,11 @@
     }
 
     tr {
-      background-color: var(--bgColor-default, var(--color-canvas-default));
-      border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+      background-color: var(--bgColor-default);
+      border-top: $border-width $border-style var(--borderColor-muted);
 
       &:nth-child(2n) {
-        background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+        background-color: var(--bgColor-muted);
       }
     }
 
diff --git a/src/marketing/buttons/button.scss b/src/marketing/buttons/button.scss
index 1df9238805..7fb89869d3 100644
--- a/src/marketing/buttons/button.scss
+++ b/src/marketing/buttons/button.scss
@@ -8,7 +8,8 @@
   font-size: 1rem;
   font-weight: $font-weight-bold;
   line-height: 1;
-  color: var(--bgColor-default, var(--color-canvas-default));
+  // stylelint-disable-next-line primer/colors
+  color: var(--bgColor-default);
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -55,7 +56,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+    @include focusOutline(2px, var(--focus-outlineColor));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -66,7 +67,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+    @include focusOutline(2px, var(--focus-outlineColor));
   }
 
   &:active {
@@ -84,7 +85,7 @@
 }
 
 .btn-muted-mktg {
-  color: var(--fgColor-default, var(--color-fg-default)) !important;
+  color: var(--fgColor-default) !important;
   background: none !important;
   box-shadow: var(--color-mktg-btn-shadow-outline);
 
@@ -98,17 +99,17 @@
 
   &:active {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--fgColor-default, var(--color-fg-default)) 0 0 0 3px inset !important;
+    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;
   }
 
   &:disabled {
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: var(--fgColor-muted, var(--color-fg-subtle)) 0 0 0 1px inset !important;
+    box-shadow: var(--fgColor-muted) 0 0 0 1px inset !important;
   }
 }
 
 .btn-subtle-mktg {
-  color: var(--fgColor-default, var(--color-fg-default)) !important;
+  color: var(--fgColor-default) !important;
   background: none !important;
   box-shadow: none !important;
 
@@ -134,7 +135,7 @@
 
   // fallback :focus state
   &:focus {
-    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+    @include focusOutline(2px, var(--focus-outlineColor));
 
     // remove fallback :focus if :focus-visible is supported
     &:not(:focus-visible) {
@@ -145,7 +146,7 @@
 
   // default focus state
   &:focus-visible {
-    @include focusOutline(2px, var(--focus-outlineColor, var(--color-accent-fg)));
+    @include focusOutline(2px, var(--focus-outlineColor));
   }
 }
 
diff --git a/src/navigation/filter-list.scss b/src/navigation/filter-list.scss
index 1d515a5358..14edfc1271 100644
--- a/src/navigation/filter-list.scss
+++ b/src/navigation/filter-list.scss
@@ -13,12 +13,12 @@
   }
 
   &.pjax-active .filter-item {
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
     background-color: transparent;
 
     &.pjax-active {
-      color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-      background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+      color: var(--fgColor-onEmphasis);
+      background-color: var(--bgColor-accent-emphasis);
     }
   }
 }
@@ -30,7 +30,7 @@
   margin-bottom: var(--base-size-4);
   overflow: hidden;
   font-size: $h5-size;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -39,14 +39,14 @@
 
   &:hover {
     text-decoration: none;
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    background-color: var(--bgColor-muted);
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
-    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
 
     // fallback :focus state
     &:focus {
@@ -77,6 +77,6 @@
     bottom: var(--base-size-2);
     z-index: -1;
     display: inline-block;
-    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+    background-color: var(--bgColor-neutral-muted);
   }
 }
diff --git a/src/navigation/sidenav.scss b/src/navigation/sidenav.scss
index a32afaa68e..d29257ed90 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(--bgColor-muted, var(--color-canvas-subtle));
+  background-color: var(--bgColor-muted);
 }
 
 .SideNav-item {
@@ -12,11 +12,11 @@
   width: 100%;
   // stylelint-disable-next-line primer/spacing
   padding: 12px var(--base-size-16);
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   text-align: left;
   background-color: transparent;
   border: 0;
-  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-top: $border-width $border-style var(--borderColor-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(--borderColor-default, var(--color-border-default));
+    box-shadow: 0 $border-width 0 var(--borderColor-default);
   }
 
   // Bar on the left
@@ -45,20 +45,20 @@
 
 .SideNav-item:hover {
   text-decoration: none;
-  background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+  background-color: var(--bgColor-neutral-muted);
 }
 
 .SideNav-item:active {
-  background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+  background-color: var(--bgColor-muted);
 }
 
 .SideNav-item[aria-current]:not([aria-current='false']),
 .SideNav-item[aria-selected='true'] {
-  background-color: var(--sideNav-bgColor-selected, var(--color-sidenav-selected-bg));
+  background-color: var(--sideNav-bgColor-selected);
 
   // Bar on the left
   &::before {
-    background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active));
+    background-color: var(--underlineNav-borderColor-active);
   }
 }
 
@@ -69,7 +69,7 @@
 .SideNav-icon {
   width: 16px;
   margin-right: var(--base-size-8);
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
 }
 
 // Sub Nav
@@ -81,19 +81,19 @@
   display: block;
   width: 100%;
   padding: var(--base-size-4) 0;
-  color: var(--fgColor-accent, var(--color-accent-fg));
+  color: var(--fgColor-accent);
   text-align: left;
   background-color: transparent;
   border: 0;
 }
 
 .SideNav-subItem:hover {
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   text-decoration: none;
 }
 
 .SideNav-subItem[aria-current]:not([aria-current='false']),
 .SideNav-subItem[aria-selected='true'] {
   font-weight: $font-weight-semibold;
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
 }
diff --git a/src/navigation/subnav.scss b/src/navigation/subnav.scss
index acfe1639c9..1db99680dd 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(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 }
 
 .subnav-flush {
@@ -27,8 +27,8 @@
   font-weight: $font-weight-semibold;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--fgColor-default, var(--color-fg-default));
-  border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
+  color: var(--fgColor-default);
+  border: $border-width $border-style var(--control-borderColor-rest);
 
   + .subnav-item {
     // stylelint-disable-next-line primer/spacing
@@ -38,16 +38,16 @@
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    background-color: var(--bgColor-muted);
   }
 
   &.selected,
   &[aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     z-index: 2;
-    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));
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
+    border-color: var(--borderColor-accent-emphasis);
 
     // fallback :focus state
     &:focus {
@@ -86,7 +86,7 @@
 .subnav-search-input {
   width: 320px;
   padding-left: var(--base-size-32);
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
 }
 
 .subnav-search-input-wide {
@@ -100,7 +100,7 @@
   top: 9px;
   left: var(--base-size-8);
   display: block;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   text-align: center;
   pointer-events: none;
 }
diff --git a/src/pagination/pagination.scss b/src/pagination/pagination.scss
index d04c45bb82..01458415a6 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(--fgColor-default, var(--color-fg-default));
+    color: var(--fgColor-default);
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -23,26 +23,26 @@
     &:hover,
     &:focus {
       text-decoration: none;
-      border-color: var(--borderColor-default, var(--color-border-default));
+      border-color: var(--borderColor-default);
       transition-duration: 0.1s;
     }
 
     &:active {
-      border-color: var(--borderColor-muted, var(--color-border-muted));
+      border-color: var(--borderColor-muted);
       transition: none;
     }
   }
 
   .previous_page,
   .next_page {
-    color: var(--fgColor-accent, var(--color-accent-fg));
+    color: var(--fgColor-accent);
   }
 
   .current,
   .current:hover,
   [aria-current]:not([aria-current='false']) {
-    color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-    background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-accent-emphasis);
     border-color: transparent;
   }
 
@@ -52,7 +52,7 @@
   .gap:hover,
   .disabled:hover,
   [aria-disabled='true']:hover {
-    color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
+    color: var(--fgColor-disabled);
     cursor: default;
     border-color: transparent;
   }
diff --git a/src/select-menu/select-menu.scss b/src/select-menu/select-menu.scss
index 68c1126012..95498bcc98 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(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
+  background-color: var(--overlay-backdrop-bgColor);
 
   @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(--overlay-bgColor, var(--color-canvas-overlay));
-  border: $border-width $border-style var(--selectMenu-borderColor, var(--color-select-menu-backdrop-border));
+  background-color: var(--overlay-bgColor);
+  border: $border-width $border-style var(--selectMenu-borderColor);
   // stylelint-disable-next-line primer/borders
   border-radius: $border-radius * 2;
-  box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
+  box-shadow: var(--shadow-floating-legacy);
   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: var(--base-size-8) 0 var(--base-size-16) 0;
     font-size: $font-size-small;
-    border-color: var(--borderColor-default, var(--color-border-default));
+    border-color: var(--borderColor-default);
     border-radius: $border-radius;
-    box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
+    box-shadow: var(--shadow-floating-legacy);
     animation-name: SelectMenu-modal-animation--sm;
   }
 }
@@ -104,7 +104,7 @@ $SelectMenu-max-height: 480px !default;
   padding: var(--base-size-16);
   flex: none; // fixes header from getting squeezed in Safari iOS
   align-items: center;
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 
   @include breakpoint(sm) {
     // stylelint-disable-next-line primer/spacing
@@ -126,7 +126,7 @@ $SelectMenu-max-height: 480px !default;
   padding: var(--base-size-16);
   margin: calc(var(--base-size-16) * -1);
   line-height: 1;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   background-color: transparent;
   border: 0;
 
@@ -144,7 +144,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-filter {
   padding: var(--base-size-16);
   margin: 0;
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 
   @include breakpoint(sm) {
     padding: var(--base-size-8);
@@ -173,7 +173,7 @@ $SelectMenu-max-height: 480px !default;
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  background-color: var(--overlay-bgColor);
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 }
 
@@ -187,12 +187,12 @@ $SelectMenu-max-height: 480px !default;
   width: 100%;
   padding: var(--base-size-16);
   overflow: hidden;
-  color: var(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-default);
   text-align: left;
   cursor: pointer;
-  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  background-color: var(--overlay-bgColor);
   border: 0;
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-bottom: $border-width $border-style var(--borderColor-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(--borderColor-muted, var(--color-border-muted));
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
   -webkit-overflow-scrolling: touch;
 
   // Hide scrollbar so it doesn't cover the text
@@ -252,12 +252,12 @@ $SelectMenu-max-height: 480px !default;
   padding: var(--base-size-8) var(--base-size-16);
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   text-align: center;
   background-color: transparent;
   border: 0;
   // stylelint-disable-next-line primer/box-shadow
-  box-shadow: inset 0 -1px 0 var(--borderColor-muted, var(--color-border-muted));
+  box-shadow: inset 0 -1px 0 var(--borderColor-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(--fgColor-default, var(--color-fg-default));
+    color: var(--fgColor-default);
     cursor: default;
-    background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+    background-color: var(--overlay-bgColor);
     // stylelint-disable-next-line primer/box-shadow
-    box-shadow: 0 0 0 1px var(--borderColor-muted, var(--color-border-muted));
+    box-shadow: 0 0 0 1px var(--borderColor-muted);
 
     @include breakpoint(sm) {
-      border-color: var(--borderColor-muted, var(--color-border-muted));
+      border-color: var(--borderColor-muted);
       box-shadow: none;
     }
   }
@@ -291,8 +291,8 @@ $SelectMenu-max-height: 480px !default;
   // stylelint-disable-next-line primer/spacing
   padding: 7px var(--base-size-16);
   text-align: center;
-  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
-  border-bottom: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  background-color: var(--overlay-bgColor);
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 }
 
 // Blankslate and Loading
@@ -303,7 +303,7 @@ $SelectMenu-max-height: 480px !default;
 .SelectMenu-loading {
   padding: var(--base-size-24) var(--base-size-16);
   text-align: center;
-  background-color: var(--overlay-bgColor, var(--color-canvas-overlay));
+  background-color: var(--overlay-bgColor);
 }
 
 // Divider
@@ -315,13 +315,13 @@ $SelectMenu-max-height: 480px !default;
   margin: 0;
   font-size: $font-size-small;
   font-weight: $font-weight-semibold;
-  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));
+  color: var(--fgColor-muted);
+  background-color: var(--bgColor-muted);
+  border-bottom: $border-width $border-style var(--borderColor-muted);
 
   // Borderless
   .SelectMenu-list--borderless & {
-    border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+    border-top: $border-width $border-style var(--borderColor-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: var(--base-size-8) var(--base-size-16);
   font-size: $font-size-small;
-  color: var(--fgColor-muted, var(--color-fg-muted));
+  color: var(--fgColor-muted);
   text-align: center;
-  border-top: $border-width $border-style var(--borderColor-muted, var(--color-border-muted));
+  border-top: $border-width $border-style var(--borderColor-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(--fgColor-default, var(--color-fg-default));
+  color: var(--fgColor-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(--fgColor-disabled, var(--color-primer-fg-disabled));
+  color: var(--fgColor-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(--fgColor-default, var(--color-fg-default));
+    color: var(--fgColor-default);
   }
 
   .SelectMenu-closeButton:active {
-    color: var(--fgColor-muted, var(--color-fg-muted));
+    color: var(--fgColor-muted);
   }
 
   body:not(.intent-mouse) .SelectMenu-item:focus,
   .SelectMenu-item:hover {
-    background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
+    background-color: var(--bgColor-neutral-muted);
   }
 
   .SelectMenu-item:active {
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    background-color: var(--bgColor-muted);
   }
 
   body:not(.intent-mouse) .SelectMenu-tab:focus {
-    background-color: var(--selectMenu-bgColor-active, var(--color-select-menu-tap-focus-bg));
+    background-color: var(--selectMenu-bgColor-active);
   }
 
   .SelectMenu-tab:hover {
-    color: var(--fgColor-default, var(--color-fg-default));
+    color: var(--fgColor-default);
   }
 
   .SelectMenu-tab:not([aria-selected='true']):active {
-    color: var(--fgColor-default, var(--color-fg-default));
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-muted);
   }
 }
 
@@ -451,13 +451,13 @@ $SelectMenu-max-height: 480px !default;
   // Android
   .SelectMenu-item:focus,
   .SelectMenu-item:active {
-    background-color: var(--bgColor-muted, var(--color-canvas-subtle));
+    background-color: var(--bgColor-muted);
   }
 
   // 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(--control-bgColor-active, var(--color-select-menu-tap-highlight));
+    -webkit-tap-highlight-color: var(--control-bgColor-active);
   }
 }
diff --git a/src/support/mixins/misc.scss b/src/support/mixins/misc.scss
index c9d273892f..311ddbd0d4 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(--bgColor-default, var(--color-canvas-default)), $border: var(--borderColor-default, var(--color-border-default))) {
+@mixin double-caret($background: var(--bgColor-default), $border: var(--borderColor-default)) {
   &::after,
   &::before {
     position: absolute;
@@ -18,7 +18,7 @@
   &::after {
     // stylelint-disable-next-line primer/spacing
     margin-left: 2px;
-    background-color: var(--bgColor-default, var(--color-canvas-default));
+    background-color: var(--bgColor-default);
     background-image: linear-gradient($background, $background);
   }
 
@@ -30,31 +30,31 @@
 // global focus styles
 
 // inset box-shadow for form controls
-@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
-  border-color: var(--focus-outlineColor, var(--color-accent-fg));
+@mixin focusBoxShadowInset($outlineWidth: 1px, $outlineColor: var(--focus-outlineColor)) {
+  border-color: var(--focus-outlineColor);
   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(--focus-outlineColor, var(--color-accent-fg))) {
+@mixin targetBoxShadow($outlineWidth: 2px, $outlineColor: var(--focus-outlineColor)) {
   outline: none !important;
   box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
 }
 
 // outline
-@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+@mixin focusOutline($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor)) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
   box-shadow: none;
 }
 
 // outline with fg box-shadow for buttons
-@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor, var(--color-accent-fg))) {
+@mixin focusOutlineOnEmphasis($outlineOffset: -2px, $outlineColor: var(--focus-outlineColor)) {
   outline: 2px solid $outlineColor;
   outline-offset: $outlineOffset;
-  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
 }
 
 // if min-width is undefined, return only min-height
diff --git a/src/support/variables/misc.scss b/src/support/variables/misc.scss
index 4c6bdb66a1..19e4324c65 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(--borderColor-default, var(--color-border-default)) !default;
-$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default, var(--color-border-default)) !default;
+$border: $border-width $border-style var(--borderColor-default) !default;
+$border-rem: var(--borderWidth-thin, 1px) solid var(--borderColor-default) !default;
 
 // Border Radius
 $border-radius-1:  4px !default;
diff --git a/src/toasts/toasts.scss b/src/toasts/toasts.scss
index bbc30c993a..eefa2a8c32 100644
--- a/src/toasts/toasts.scss
+++ b/src/toasts/toasts.scss
@@ -3,10 +3,10 @@
 .Toast {
   display: flex;
   margin: var(--base-size-8);
-  color: var(--fgColor-default, var(--color-fg-default));
-  background-color: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
   border-radius: $border-radius;
-  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+  box-shadow: inset 0 0 0 1px var(--borderColor-default), var(--shadow-floating-legacy);
 
   @include breakpoint(sm) {
     width: max-content;
@@ -21,8 +21,8 @@
   justify-content: center;
   width: calc(var(--base-size-16) * 3);
   flex-shrink: 0;
-  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
-  background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis));
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-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(--fgColor-default, var(--color-fg-default));
-  box-shadow: inset 0 0 0 1px var(--borderColor-default, var(--color-border-default)), var(--shadow-floating-legacy, var(--color-overlay-shadow));
+  color: var(--fgColor-default);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default), var(--shadow-floating-legacy);
 
   .Toast-icon {
-    background-color: var(--bgColor-neutral-emphasis, var(--color-neutral-emphasis));
+    background-color: var(--bgColor-neutral-emphasis);
   }
 }
 
 .Toast--error {
-  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-legacy, var(--color-overlay-shadow));
+  color: var(--fgColor-default);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default), var(--shadow-floating-legacy);
 
   .Toast-icon {
-    background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis));
+    background-color: var(--bgColor-danger-emphasis);
   }
 }
 
 .Toast--warning {
-  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-legacy, var(--color-overlay-shadow));
+  color: var(--fgColor-default);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default), var(--shadow-floating-legacy);
 
   .Toast-icon {
-    background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis));
+    background-color: var(--bgColor-attention-emphasis);
   }
 }
 
 .Toast--success {
-  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-legacy, var(--color-overlay-shadow));
+  color: var(--fgColor-default);
+  box-shadow: inset 0 0 0 1px var(--borderColor-default), var(--shadow-floating-legacy);
 
   .Toast-icon {
-    background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis));
+    background-color: var(--bgColor-success-emphasis);
   }
 }
 
diff --git a/src/tooltips/tooltips.scss b/src/tooltips/tooltips.scss
index 36f1c19e96..ae56cfb103 100644
--- a/src/tooltips/tooltips.scss
+++ b/src/tooltips/tooltips.scss
@@ -12,7 +12,7 @@
   padding: var(--overlay-paddingBlock-condensed, 0.25rem) var(--overlay-padding-condensed, 0.5rem);
   font: var(--text-body-shorthand-small, normal normal 11px/1.5 $body-font);
   -webkit-font-smoothing: subpixel-antialiased;
-  color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));
+  color: var(--fgColor-onEmphasis);
   text-align: center;
   text-decoration: none;
   text-shadow: none;
@@ -22,7 +22,7 @@
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+  background: var(--bgColor-emphasis);
   // stylelint-disable-next-line primer/borders
   border-radius: var(--borderRadius-medium);
   opacity: 0;
diff --git a/src/utilities/box-shadow.scss b/src/utilities/box-shadow.scss
index ab3207630d..46995de91a 100644
--- a/src/utilities/box-shadow.scss
+++ b/src/utilities/box-shadow.scss
@@ -3,23 +3,23 @@
 // Box shadows
 
 .color-shadow-small {
-  box-shadow: var(--shadow-resting-small, var(--color-shadow-small)) !important;
+  box-shadow: var(--shadow-resting-small) !important;
 }
 
 .color-shadow-medium {
-  box-shadow: var(--shadow-resting-medium, var(--color-shadow-medium)) !important;
+  box-shadow: var(--shadow-resting-medium) !important;
 }
 
 .color-shadow-large {
-  box-shadow: var(--shadow-floating-large, var(--color-shadow-large)) !important;
+  box-shadow: var(--shadow-floating-large) !important;
 }
 
 .color-shadow-extra-large {
-  box-shadow: var(--shadow-floating-xlarge, var(--color-shadow-extra-large)) !important;
+  box-shadow: var(--shadow-floating-xlarge) !important;
 }
 
 .shadow-floating-small {
-  box-shadow: var(--shadow-floating-small, var(--color-overlay-shadow)) !important;
+  box-shadow: var(--shadow-floating-small) !important;
 }
 
 // Turn off box shadow
diff --git a/src/utilities/colors.scss b/src/utilities/colors.scss
index 6ea5a90026..e97c83d33f 100644
--- a/src/utilities/colors.scss
+++ b/src/utilities/colors.scss
@@ -1,91 +1,91 @@
 
 // Foreground
 
-.color-fg-default, .fgColor-default     { color: var(--fgColor-default, var(--color-fg-default)) !important; }
-.color-fg-muted, .fgColor-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, .fgColor-accent    { color: var(--fgColor-accent, var(--color-accent-fg)) !important; }
-.color-fg-success, .fgColor-success   { color: var(--fgColor-success, var(--color-success-fg)) !important; }
-.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention, var(--color-attention-fg)) !important; }
-.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe, var(--color-severe-fg)) !important; }
-.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger, var(--color-danger-fg)) !important; }
-.color-fg-open, .fgColor-open      { color: var(--fgColor-open, var(--color-open-fg)) !important; }
-.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed, var(--color-closed-fg)) !important; }
-.color-fg-done, .fgColor-done      { color: var(--fgColor-done, var(--color-done-fg)) !important; }
-.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors, var(--color-sponsors-fg)) !important; }
-
-.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis, var(--color-fg-on-emphasis)) !important; }
+.color-fg-default, .fgColor-default     { color: var(--fgColor-default) !important; }
+.color-fg-muted, .fgColor-muted      { color: var(--fgColor-muted) !important; }
+.color-fg-subtle      { color: var(--fgColor-muted) !important; }
+
+.color-fg-accent, .fgColor-accent    { color: var(--fgColor-accent) !important; }
+.color-fg-success, .fgColor-success   { color: var(--fgColor-success) !important; }
+.color-fg-attention, .fgColor-attention { color: var(--fgColor-attention) !important; }
+.color-fg-severe, .fgColor-severe    { color: var(--fgColor-severe) !important; }
+.color-fg-danger, .fgColor-danger    { color: var(--fgColor-danger) !important; }
+.color-fg-open, .fgColor-open      { color: var(--fgColor-open) !important; }
+.color-fg-closed, .fgColor-closed    { color: var(--fgColor-closed) !important; }
+.color-fg-done, .fgColor-done      { color: var(--fgColor-done) !important; }
+.color-fg-sponsors, .fgColor-sponsors  { color: var(--fgColor-sponsors) !important; }
+
+.color-fg-on-emphasis, .fgColor-onEmphasis { color: var(--fgColor-onEmphasis) !important; }
 
 // Background
 
-.color-bg-default, .bgColor-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, .bgColor-inset    { background-color: var(--bgColor-inset, var(--color-canvas-inset)) !important; }
-.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted, var(--color-canvas-subtle)) !important; }
-.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus)) !important; }
+.color-bg-default, .bgColor-default  { background-color: var(--bgColor-default) !important; }
+.color-bg-overlay  { background-color: var(--overlay-bgColor) !important; }
+.color-bg-inset, .bgColor-inset    { background-color: var(--bgColor-inset) !important; }
+.color-bg-subtle, .bgColor-muted   { background-color: var(--bgColor-muted) !important; }
+.color-bg-emphasis, .bgColor-emphasis { background-color: var(--bgColor-emphasis) !important; }
 
-.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)) !important; }
-.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-bg-accent, .bgColor-accent-muted          { background-color: var(--bgColor-accent-muted) !important; }
+.color-bg-accent-emphasis, .bgColor-accent-emphasis { background-color: var(--bgColor-accent-emphasis) !important; }
 
-.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted, var(--color-success-subtle)) !important; }
-.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-bg-success, .bgColor-success-muted          { background-color: var(--bgColor-success-muted) !important; }
+.color-bg-success-emphasis, .bgColor-success-emphasis { background-color: var(--bgColor-success-emphasis) !important; }
 
-.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted, var(--color-attention-subtle)) !important; }
-.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-bg-attention, .bgColor-attention-muted          { background-color: var(--bgColor-attention-muted) !important; }
+.color-bg-attention-emphasis, .bgColor-attention-emphasis { background-color: var(--bgColor-attention-emphasis) !important; }
 
-.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted, var(--color-severe-subtle)) !important; }
-.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-bg-severe, .bgColor-severe-muted          { background-color: var(--bgColor-severe-muted) !important; }
+.color-bg-severe-emphasis, .bgColor-severe-emphasis { background-color: var(--bgColor-severe-emphasis) !important; }
 
-.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted, var(--color-danger-subtle)) !important; }
-.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-bg-danger, .bgColor-danger-muted          { background-color: var(--bgColor-danger-muted) !important; }
+.color-bg-danger-emphasis, .bgColor-danger-emphasis { background-color: var(--bgColor-danger-emphasis) !important; }
 
-.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted, var(--color-open-subtle)) !important; }
-.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-bg-open, .bgColor-open-muted          { background-color: var(--bgColor-open-muted) !important; }
+.color-bg-open-emphasis, .bgColor-open-emphasis { background-color: var(--bgColor-open-emphasis) !important; }
 
-.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted, var(--color-closed-subtle)) !important; }
-.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-bg-closed, .bgColor-closed-muted          { background-color: var(--bgColor-closed-muted) !important; }
+.color-bg-closed-emphasis, .bgColor-closed-emphasis { background-color: var(--bgColor-closed-emphasis) !important; }
 
-.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted, var(--color-done-subtle)) !important; }
-.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-bg-done, .bgColor-done-muted          { background-color: var(--bgColor-done-muted) !important; }
+.color-bg-done-emphasis, .bgColor-done-emphasis { background-color: var(--bgColor-done-emphasis) !important; }
 
-.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted, var(--color-sponsors-subtle)) !important; }
-.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-bg-sponsors, .bgColor-sponsors-muted          { background-color: var(--bgColor-sponsors-muted) !important; }
+.color-bg-sponsors-emphasis, .bgColor-sponsors-emphasis { background-color: var(--bgColor-sponsors-emphasis) !important; }
 
 .color-bg-transparent, .bgColor-transparent { background-color: transparent !important; }
 
 // Border
 
-.color-border-default, .borderColor-default { border-color: var(--borderColor-default, var(--color-border-default)) !important; }
-.color-border-muted, .borderColor-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-default, .borderColor-default { border-color: var(--borderColor-default) !important; }
+.color-border-muted, .borderColor-muted   { border-color: var(--borderColor-muted) !important; }
+.color-border-subtle  { border-color: var(--borderColor-muted) !important; }
 
-.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted, var(--color-accent-muted)) !important; }
-.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)) !important; }
+.color-border-accent, .borderColor-accent-muted          { border-color: var(--borderColor-accent-muted) !important; }
+.color-border-accent-emphasis, .borderColor-accent-emphasis { border-color: var(--borderColor-accent-emphasis) !important; }
 
-.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted, var(--color-success-muted)) !important; }
-.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis, var(--color-success-emphasis)) !important; }
+.color-border-success, .borderColor-success-muted          { border-color: var(--borderColor-success-muted) !important; }
+.color-border-success-emphasis, .borderColor-success-emphasis { border-color: var(--borderColor-success-emphasis) !important; }
 
-.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted, var(--color-attention-muted)) !important; }
-.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis)) !important; }
+.color-border-attention, .borderColor-attention-muted          { border-color: var(--borderColor-attention-muted) !important; }
+.color-border-attention-emphasis, .borderColor-attention-emphasis { border-color: var(--borderColor-attention-emphasis) !important; }
 
-.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted, var(--color-severe-muted)) !important; }
-.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis, var(--color-severe-emphasis)) !important; }
+.color-border-severe, .borderColor-severe-muted          { border-color: var(--borderColor-severe-muted) !important; }
+.color-border-severe-emphasis, .borderColor-severe-emphasis { border-color: var(--borderColor-severe-emphasis) !important; }
 
-.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted, var(--color-danger-muted)) !important; }
-.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis)) !important; }
+.color-border-danger, .borderColor-danger-muted          { border-color: var(--borderColor-danger-muted) !important; }
+.color-border-danger-emphasis, .borderColor-danger-emphasis { border-color: var(--borderColor-danger-emphasis) !important; }
 
-.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted, var(--color-open-muted)) !important; }
-.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis, var(--color-open-emphasis)) !important; }
+.color-border-open, .borderColor-open-muted          { border-color: var(--borderColor-open-muted) !important; }
+.color-border-open-emphasis, .borderColor-open-emphasis { border-color: var(--borderColor-open-emphasis) !important; }
 
-.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted, var(--color-closed-muted)) !important; }
-.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis, var(--color-closed-emphasis)) !important; }
+.color-border-closed, .borderColor-closed-muted          { border-color: var(--borderColor-closed-muted) !important; }
+.color-border-closed-emphasis, .borderColor-closed-emphasis { border-color: var(--borderColor-closed-emphasis) !important; }
 
-.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted, var(--color-done-muted)) !important; }
-.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis, var(--color-done-emphasis)) !important; }
+.color-border-done, .borderColor-done-muted          { border-color: var(--borderColor-done-muted) !important; }
+.color-border-done-emphasis, .borderColor-done-emphasis { border-color: var(--borderColor-done-emphasis) !important; }
 
-.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted, var(--color-sponsors-muted)) !important; }
-.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis, var(--color-sponsors-emphasis)) !important; }
+.color-border-sponsors, .borderColor-sponsors-muted          { border-color: var(--borderColor-sponsors-muted) !important; }
+.color-border-sponsors-emphasis, .borderColor-sponsors-emphasis { border-color: var(--borderColor-sponsors-emphasis) !important; }
 
 // Misc
 
diff --git a/src/utilities/details.scss b/src/utilities/details.scss
index 00d6f11db7..724bd97d40 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(--overlay-backdrop-bgColor, var(--color-primer-canvas-backdrop));
+  background: var(--overlay-backdrop-bgColor);
 }
 
 .details-reset {