diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 023cb215218..68cd3d217a9 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -150,15 +150,16 @@ $stacking-order: (
 }
 
 .outline {
-  @include button-outline(color('ink', 'lighter'));
+  @include button-outline(var(--p-border));
 
   &.disabled {
-    @include button-outline-disabled(color('ink', 'lighter'));
+    background: transparent;
+    box-shadow: none;
   }
 }
 
 .destructive.outline {
-  @include button-outline(color('red'));
+  @include button-outline(var(--p-border-critical));
 }
 
 .disabled {
@@ -485,9 +486,12 @@ $stacking-order: (
   border-bottom-left-radius: 0;
   height: 100%;
 
-  // Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color.
+  // Note 1: Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color.
+  // Note 2: hardcoding this value because we can't use custom css properties in sass functions. Will clean up in a follow-up
+  // https://github.com/Shopify/polaris-react/pull/4655#discussion_r750793847
   &.outline:not(:focus) {
-    border-left-color: rgba(color('ink', 'lighter'), 0);
+    /* stylelint-disable color-no-hex */
+    border-left-color: rgba(#d2d5d8, 0);
   }
 
   &:focus,
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index 1a02eef61d3..1670cb5fb29 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -2,9 +2,6 @@ $item-font-size: rem(16px);
 $item-font-size-small: rem(14px);
 $item-line-height-small: rem(32px);
 $item-line-height-large: rem(36px);
-// This is the only place this color is used.
-// stylelint-disable-next-line color-no-hex
-$item-selected-background: rgba(color('indigo'), 0.12);
 $text-line-height: rem(20px);
 $nav-variables: (
   mobile-spacing: rem(10px),
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
index ed424193870..b6d14c1d95f 100644
--- a/src/styles/shared/_buttons.scss
+++ b/src/styles/shared/_buttons.scss
@@ -197,11 +197,7 @@
 
 @mixin button-outline-disabled($outline-color) {
   background: transparent;
-  // border-color: rgba($outline-color, 0.25);
   box-shadow: none;
-  // color: color('ink', 'lightest');
-
-  // @include recolor-icon(color('ink', 'lightest'));
 }
 
 @mixin button-full-width {