diff --git a/src/components/ActionList/ActionList.scss b/src/components/ActionList/ActionList.scss
index 416fba65b43..f0def807678 100644
--- a/src/components/ActionList/ActionList.scss
+++ b/src/components/ActionList/ActionList.scss
@@ -31,13 +31,10 @@ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
 
 .Title {
   @include text-style-subheading;
-
-  --p-titleVerticalSpacing: calc(var(--p-space-2) * 1.5);
-  padding: var(--p-space-1) var(--p-space-4) var(--p-titleVerticalSpacing)
-    var(--p-space-4);
+  padding: var(--p-space-1) var(--p-space-4) var(--p-space-3) var(--p-space-4);
 
   &.firstSectionWithTitle {
-    padding-top: var(--p-titleVerticalSpacing);
+    padding-top: var(--p-space-3);
   }
 }
 
diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss
index d8fcfbdc9c7..3e09787e9fa 100644
--- a/src/components/Badge/Badge.scss
+++ b/src/components/Badge/Badge.scss
@@ -1,14 +1,14 @@
 @import '../../styles/common';
 
 .Badge {
-  --p-horizontal-padding: var(--p-space-2);
-  --p-vertical-padding: calc(var(--p-space-1) - #{rem(2px)});
-  --p-pip-size: var(--p-space-2);
-  --p-pip-spacing: calc(var(--p-pip-size) / 2);
-  --p-component-badge-pip-color: var(--p-icon);
+  --pc-badge-horizontal-padding: var(--p-space-2);
+  --pc-badge-vertical-padding: calc(var(--p-space-1) - #{rem(2px)});
+  --pc-badge-pip-size: var(--p-space-2);
+  --pc-badge-pip-spacing: calc(var(--pc-badge-pip-size) / 2);
+  --pc-badge-component-badge-pip-color: var(--p-icon);
   display: inline-flex;
   align-items: center;
-  padding: var(--p-vertical-padding) var(--p-horizontal-padding);
+  padding: var(--pc-badge-vertical-padding) var(--pc-badge-horizontal-padding);
   background-color: var(--p-surface-neutral);
   border-radius: var(--p-space-5);
   font-size: font-size(caption);
@@ -26,31 +26,31 @@
 }
 
 .statusSuccess {
-  --p-component-badge-pip-color: var(--p-icon-success);
+  --pc-badge-component-badge-pip-color: var(--p-icon-success);
   background-color: var(--p-surface-success);
   color: var(--p-text);
 }
 
 .statusInfo {
-  --p-component-badge-pip-color: var(--p-icon-highlight);
+  --pc-badge-component-badge-pip-color: var(--p-icon-highlight);
   background-color: var(--p-surface-highlight);
   color: var(--p-text);
 }
 
 .statusAttention {
-  --p-component-badge-pip-color: var(--p-text-warning);
+  --pc-badge-component-badge-pip-color: var(--p-text-warning);
   background-color: var(--p-surface-warning);
   color: var(--p-text);
 }
 
 .statusWarning {
-  --p-component-badge-pip-color: var(--p-icon-warning);
+  --pc-badge-component-badge-pip-color: var(--p-icon-warning);
   background-color: var(--p-surface-warning);
   color: var(--p-text);
 }
 
 .statusCritical {
-  --p-component-badge-pip-color: var(--p-icon-critical);
+  --pc-badge-component-badge-pip-color: var(--p-icon-critical);
   background-color: var(--p-surface-critical);
   color: var(--p-text);
 }
@@ -63,11 +63,13 @@
 }
 
 .Pip {
-  color: var(--p-component-badge-pip-color);
-  height: var(--p-pip-size);
-  width: var(--p-pip-size);
-  margin-right: var(--p-pip-spacing);
-  margin-left: calc(var(--p-vertical-padding) - var(--p-pip-spacing));
+  color: var(--pc-badge-component-badge-pip-color);
+  height: var(--pc-badge-pip-size);
+  width: var(--pc-badge-pip-size);
+  margin-right: var(--pc-badge-pip-spacing);
+  margin-left: calc(
+    var(--pc-badge-vertical-padding) - var(--pc-badge-pip-spacing)
+  );
   border: border-width(thick) solid currentColor;
   border-radius: 50%;
   flex-shrink: 0;
diff --git a/src/components/Banner/Banner.scss b/src/components/Banner/Banner.scss
index 10fdcd82a6c..17fc1697017 100644
--- a/src/components/Banner/Banner.scss
+++ b/src/components/Banner/Banner.scss
@@ -5,20 +5,20 @@ $ribbon-flex-basis: rem(32px);
 $spinner-size: rem(20px);
 
 @mixin banner-variants($in-page) {
-  --p-banner-background: var(--p-background);
-  --p-banner-border: var(--p-banner-border-default);
+  --pc-banner-background: var(--p-background);
+  --pc-banner-border: var(--p-banner-border-default);
   transition: box-shadow var(--p-duration-200) var(--p-ease);
   transition-delay: var(--p-duration-100);
-  box-shadow: var(--p-banner-border);
+  box-shadow: var(--pc-banner-border);
 
   @if $in-page {
     @include focus-ring('wide');
     border-radius: var(--p-border-radius-wide);
-    background-color: var(--p-banner-background);
+    background-color: var(--pc-banner-background);
   } @else {
     @include focus-ring('base');
     border-radius: var(--p-border-radius-base);
-    background-color: var(--p-banner-background);
+    background-color: var(--pc-banner-background);
   }
 
   @include high-contrast-outline;
@@ -28,35 +28,35 @@ $spinner-size: rem(20px);
   }
 
   &.keyFocused {
-    box-shadow: var(--p-banner-border);
+    box-shadow: var(--pc-banner-border);
     @include focus-ring('wide', $style: 'focused');
   }
 
   &.statusSuccess {
-    --p-banner-background: var(--p-surface-success-subdued);
-    --p-banner-border: var(--p-banner-border-success);
+    --pc-banner-background: var(--p-surface-success-subdued);
+    --pc-banner-border: var(--p-banner-border-success);
   }
 
   &.statusInfo {
-    --p-banner-background: var(--p-surface-highlight-subdued);
-    --p-banner-border: var(--p-banner-border-highlight);
+    --pc-banner-background: var(--p-surface-highlight-subdued);
+    --pc-banner-border: var(--p-banner-border-highlight);
   }
 
   &.statusWarning {
-    --p-banner-background: var(--p-surface-warning-subdued);
-    --p-banner-border: var(--p-banner-border-warning);
+    --pc-banner-background: var(--p-surface-warning-subdued);
+    --pc-banner-border: var(--p-banner-border-warning);
   }
 
   &.statusCritical {
-    --p-banner-background: var(--p-surface-critical-subdued);
-    --p-banner-border: var(--p-banner-border-critical);
+    --pc-banner-background: var(--p-surface-critical-subdued);
+    --pc-banner-border: var(--p-banner-border-critical);
   }
 }
 
 .Banner {
-  --p-rgb-text: 33, 43, 54;
-  --p-secondary-action-horizontal-padding: calc(1.5 * var(--p-space-2));
-  --p-secondary-action-vertical-padding: 0.5 *
+  --pc-banner-rgb-text: 33, 43, 54;
+  --pc-banner-secondary-action-horizontal-padding: calc(1.5 * var(--p-space-2));
+  --pc-banner-secondary-action-vertical-padding: 0.5 *
     (#{control-height() - line-height(body)});
   position: relative;
   display: flex;
@@ -149,12 +149,12 @@ $spinner-size: rem(20px);
 }
 
 .withinContentContainer {
-  --p-banner-spacing: #{rem(14px)};
-  --p-banner-offset: calc(var(--p-banner-spacing) - var(--p-space-4));
-  padding: var(--p-space-4) var(--p-space-4) var(--p-banner-spacing);
+  --pc-banner-spacing: #{rem(14px)};
+  --pc-banner-offset: calc(var(--pc-banner-spacing) - var(--p-space-4));
+  padding: var(--p-space-4) var(--p-space-4) var(--pc-banner-spacing);
 
   .ContentWrapper {
-    margin-top: var(--p-banner-offset);
+    margin-top: var(--pc-banner-offset);
   }
 
   .Dismiss {
@@ -179,13 +179,13 @@ $spinner-size: rem(20px);
 }
 
 .withinPage {
-  --p-banner-spacing: #{rem(18px)};
-  --p-banner-offset: calc(var(--p-banner-spacing) - var(--p-space-5));
+  --pc-banner-spacing: #{rem(18px)};
+  --pc-banner-offset: calc(var(--pc-banner-spacing) - var(--p-space-5));
   border-radius: 0 0 border-radius() border-radius();
-  padding: var(--p-space-5) var(--p-space-5) var(--p-banner-spacing);
+  padding: var(--p-space-5) var(--p-space-5) var(--pc-banner-spacing);
 
   .ContentWrapper {
-    margin-top: var(--p-banner-offset);
+    margin-top: var(--pc-banner-offset);
   }
 
   @include banner-variants(true);
@@ -240,19 +240,19 @@ $spinner-size: rem(20px);
   @include unstyled-link;
   display: inline-block;
   text-align: left;
-  margin: calc(-1 * var(--p-secondary-action-vertical-padding))
-    calc(-0.5 * var(--p-secondary-action-horizontal-padding));
-  padding: var(--p-secondary-action-vertical-padding)
-    var(--p-secondary-action-horizontal-padding);
+  margin: calc(-1 * var(--pc-banner-secondary-action-vertical-padding))
+    calc(-0.5 * var(--pc-banner-secondary-action-horizontal-padding));
+  padding: var(--pc-banner-secondary-action-vertical-padding)
+    var(--pc-banner-secondary-action-horizontal-padding);
   color: var(--p-text);
   padding-left: rem(6px);
 
   &:hover > .Text {
-    box-shadow: 0 -2px 0 0 rgba(var(--p-rgb-text), 0.75) inset;
+    box-shadow: 0 -2px 0 0 rgba(var(--pc-banner-rgb-text), 0.75) inset;
   }
 
   &:active > .Text {
-    box-shadow: 0 -2px 0 0 rgba(var(--p-rgb-text), 0) inset;
+    box-shadow: 0 -2px 0 0 rgba(var(--pc-banner-rgb-text), 0) inset;
   }
 
   &:focus > .Text {
@@ -263,7 +263,7 @@ $spinner-size: rem(20px);
 }
 
 .Text {
-  box-shadow: 0 -2px 0 0 rgba(var(--p-rgb-text), 0.25) inset;
+  box-shadow: 0 -2px 0 0 rgba(var(--pc-banner-rgb-text), 0.25) inset;
   will-change: box-shadow;
   transition: box-shadow var(--p-duration-200) var(--p-ease);
 }
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 7a2bfa7b9bf..57500c2d4d0 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -12,8 +12,8 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
   inset 0 1px 1px 0 rgba(22, 29, 37, 0.05), inset 0 0 3px 0;
 
 .Button {
-  --pc-segment: 10;
-  --pc-focused: 20;
+  --pc-button-segment: 10;
+  --pc-button-focused: 20;
   @include button-base;
 
   &.disabled {
@@ -21,7 +21,7 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
   }
 
   &.connectedDisclosure {
-    z-index: var(--pc-segment);
+    z-index: var(--pc-button-segment);
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
 
@@ -31,7 +31,7 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
     }
 
     &:focus {
-      z-index: var(--pc-focused);
+      z-index: var(--pc-button-focused);
     }
   }
 }
@@ -121,11 +121,11 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
 }
 
 .primary {
-  --p-button-color: var(--p-action-primary);
-  --p-button-text: var(--p-text-on-primary);
-  --p-button-color-hover: var(--p-action-primary-hovered);
-  --p-button-color-active: var(--p-action-primary-pressed);
-  --p-button-color-depressed: var(--p-action-primary-depressed);
+  --pc-button-color: var(--p-action-primary);
+  --pc-button-text: var(--p-text-on-primary);
+  --pc-button-color-hover: var(--p-action-primary-hovered);
+  --pc-button-color-active: var(--p-action-primary-pressed);
+  --pc-button-color-depressed: var(--p-action-primary-depressed);
   @include recolor-icon(var(--p-icon-on-primary));
 
   &.disabled {
@@ -134,11 +134,11 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
 }
 
 .destructive {
-  --p-button-color: var(--p-action-critical);
-  --p-button-text: var(--p-text-on-critical);
-  --p-button-color-hover: var(--p-action-critical-hovered);
-  --p-button-color-active: var(--p-action-critical-pressed);
-  --p-button-color-depressed: var(--p-action-critical-depressed);
+  --pc-button-color: var(--p-action-critical);
+  --pc-button-text: var(--p-text-on-critical);
+  --pc-button-color-hover: var(--p-action-critical-hovered);
+  --pc-button-color-active: var(--p-action-critical-pressed);
+  --pc-button-color-depressed: var(--p-action-critical-depressed);
   @include recolor-icon(var(--p-icon-on-critical));
 
   &.disabled {
@@ -477,7 +477,7 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
 }
 
 .ConnectedDisclosure {
-  z-index: var(--pc-segment);
+  z-index: var(--pc-button-segment);
   margin-left: -(border-width());
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
@@ -493,7 +493,7 @@ $partial-button-filled-pressed-box-shadow: inset 0 0 0 0 transparent,
 
   &:focus,
   &:active {
-    z-index: var(--pc-focused);
+    z-index: var(--pc-button-focused);
   }
 
   &.primary,
diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss
index 106650c33c4..167f3ee0049 100644
--- a/src/components/ButtonGroup/ButtonGroup.scss
+++ b/src/components/ButtonGroup/ButtonGroup.scss
@@ -1,31 +1,27 @@
 @import '../../styles/common';
 
 .ButtonGroup {
-  --pc-item: 10;
-  --pc-focused: 20;
-  --pc-plain-horizontal-spacing: var(--p-space-2);
-  --pc-item-spacing: var(--p-space-2);
+  --pc-button-group-item: 10;
+  --pc-button-group-focused: 20;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: calc(-1 * var(--pc-item-spacing));
-  margin-left: calc(-1 * var(--pc-item-spacing));
+  margin-top: calc(-1 * var(--p-space-2));
+  margin-left: calc(-1 * var(--p-space-2));
 }
 
 .Item {
-  margin-top: var(--pc-item-spacing);
-  margin-left: var(--pc-item-spacing);
+  margin-top: var(--p-space-2);
+  margin-left: var(--p-space-2);
 }
 
 .Item-plain {
   &:not(:first-child) {
-    margin-left: calc(
-      var(--pc-item-spacing) + var(--pc-plain-horizontal-spacing)
-    );
+    margin-left: calc(var(--p-space-2) + var(--p-space-2));
   }
 
   &:not(:last-child) {
-    margin-right: var(--pc-plain-horizontal-spacing);
+    margin-right: var(--p-space-2);
   }
 }
 
@@ -37,7 +33,7 @@
 
   .Item {
     position: relative;
-    z-index: var(--pc-item);
+    z-index: var(--pc-button-group-item);
     margin-top: 0;
     margin-left: 0;
 
@@ -47,7 +43,7 @@
   }
 
   .Item-focused {
-    z-index: var(--pc-focused);
+    z-index: var(--pc-button-group-focused);
   }
 }
 
diff --git a/src/components/ColorPicker/ColorPicker.scss b/src/components/ColorPicker/ColorPicker.scss
index 907b24f3329..fc045237e8f 100644
--- a/src/components/ColorPicker/ColorPicker.scss
+++ b/src/components/ColorPicker/ColorPicker.scss
@@ -13,9 +13,9 @@ $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
 }
 
 .ColorPicker {
-  --pc-color: 10;
-  --pc-adjustments: 20;
-  --pc-dragger: 30;
+  --pc-color-picker: 10;
+  --pc-color-picker-adjustments: 20;
+  --pc-color-picker-dragger: 30;
   user-select: none;
   display: flex;
 }
@@ -52,7 +52,7 @@ $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
   &::before {
     content: '';
     position: absolute;
-    z-index: var(--pc-adjustments);
+    z-index: var(--pc-color-picker-adjustments);
     top: 0;
     left: 0;
     display: block;
@@ -73,7 +73,7 @@ $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
 
 .Dragger {
   position: relative;
-  z-index: var(--pc-dragger);
+  z-index: var(--pc-color-picker-dragger);
   bottom: 0.5 * $dragger-size;
   transform: none;
   height: $dragger-size;
@@ -121,7 +121,7 @@ $huepicker-bottom-padding-start: $picker-size - $dragger-size;
 
 .ColorLayer {
   position: absolute;
-  z-index: var(--pc-color);
+  z-index: var(--pc-color-picker);
   top: 0;
   left: 0;
   height: 100%;
diff --git a/src/components/Connected/Connected.scss b/src/components/Connected/Connected.scss
index 6df6258f589..addfd1cd538 100644
--- a/src/components/Connected/Connected.scss
+++ b/src/components/Connected/Connected.scss
@@ -1,16 +1,16 @@
 @import '../../styles/common';
 
 .Connected {
-  --pc-item: 10;
-  --pc-primary: 20;
-  --pc-focused: 30;
+  --pc-connected-item: 10;
+  --pc-connected-primary: 20;
+  --pc-connected-focused: 30;
   position: relative;
   display: flex;
 }
 
 .Item {
   position: relative;
-  z-index: var(--pc-item);
+  z-index: var(--pc-connected-item);
   flex: 0 0 auto;
 
   &:not(:first-child) {
@@ -23,12 +23,12 @@
 // TextField.scss has a dependency due to this override.
 // stylelint-disable declaration-no-important
 .Item-primary {
-  z-index: var(--pc-primary);
+  z-index: var(--pc-connected-primary);
   flex: 1 1 auto;
 }
 
 // stylelint-enable declaration-no-important
 
 .Item-focused {
-  z-index: var(--pc-focused);
+  z-index: var(--pc-connected-focused);
 }
diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss
index fcc47f62a43..05b0dfbd4af 100755
--- a/src/components/DropZone/DropZone.scss
+++ b/src/components/DropZone/DropZone.scss
@@ -23,8 +23,8 @@ $dropzone-min-height-small: rem(50px);
 }
 
 .DropZone {
-  --pc-outline: 29;
-  --pc-overlay: 30;
+  --pc-drop-zone-outline: 29;
+  --pc-drop-zone-overlay: 30;
   position: relative;
   display: flex;
   justify-content: center;
@@ -34,7 +34,7 @@ $dropzone-min-height-small: rem(50px);
   &::after {
     content: '';
     position: absolute;
-    z-index: var(--pc-outline);
+    z-index: var(--pc-drop-zone-outline);
     top: 0;
     right: 0;
     bottom: 0;
@@ -128,7 +128,7 @@ $dropzone-min-height-small: rem(50px);
 .Overlay {
   @include set-border-radius;
   position: absolute;
-  z-index: var(--pc-overlay);
+  z-index: var(--pc-drop-zone-overlay);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
index d7890bc55f6..3f5c071ac57 100644
--- a/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
+++ b/src/components/Filters/components/ConnectedFilterControl/ConnectedFilterControl.scss
@@ -5,8 +5,8 @@
 // stylelint-disable selector-max-compound-selectors
 // stylelint-disable selector-max-type
 .ConnectedFilterControl {
-  --pc-item: 10;
-  --pc-focused: 20;
+  --pc-connceted-filter-control-item: 10;
+  --pc-connceted-filter-control-focused: 20;
   display: flex;
   flex-grow: 1;
 
@@ -25,11 +25,11 @@
 
 .Item {
   position: relative;
-  z-index: var(--pc-item);
+  z-index: var(--pc-connceted-filter-control-item);
 }
 
 .Item-focused {
-  z-index: var(--pc-focused);
+  z-index: var(--pc-connceted-filter-control-focused);
 }
 
 .ProxyButtonContainer {
diff --git a/src/components/Frame/components/ToastManager/ToastManager.scss b/src/components/Frame/components/ToastManager/ToastManager.scss
index f84c41a798e..ea77525f878 100644
--- a/src/components/Frame/components/ToastManager/ToastManager.scss
+++ b/src/components/Frame/components/ToastManager/ToastManager.scss
@@ -4,8 +4,8 @@
   // Sass does not allow arbitrary Sass function calls in custom properties.
   // They must be interpolated
   // See https://github.com/sass/libsass/issues/2585
-  --toast-translate-y-out: #{rem(150px)};
-  --toast-translate-y-in: 0;
+  --pc-toast-manager-translate-y-out: #{rem(150px)};
+  --pc-toast-manager-translate-y-in: 0;
 }
 
 .ToastManager {
@@ -26,16 +26,16 @@
   opacity: 0;
   transition: transform var(--p-duration-400) ease,
     opacity var(--p-duration-400) ease;
-  transform: translateY(var(--toast-translate-y-out));
+  transform: translateY(var(--pc-toast-manager-translate-y-out));
 }
 
 .ToastWrapper-enter,
 .ToastWrapper-exit {
-  transform: translateY(var(--toast-translate-y-out));
+  transform: translateY(var(--pc-toast-manager-translate-y-out));
   opacity: 0;
 }
 
 .ToastWrapper-enter-done {
-  transform: translateY(var(--toast-translate-y-in));
+  transform: translateY(var(--pc-toast-manager-translate-y-in));
   opacity: 1;
 }
diff --git a/src/components/IndexTable/IndexTable.scss b/src/components/IndexTable/IndexTable.scss
index d3720c80478..7da7b1f2a7d 100644
--- a/src/components/IndexTable/IndexTable.scss
+++ b/src/components/IndexTable/IndexTable.scss
@@ -6,13 +6,13 @@ $checkbox-offset-right: rem(18px);
 $small-checkbox-offset: rem(2px);
 
 .IndexTable {
-  --pc-translate-offset: calc(#{rem(50px)} - var(--p-space-4));
-  --pc-table-header-offset: #{rem(52px)};
-  --pc-cell: 1;
-  --pc-sticky-cell: 31;
-  --pc-scroll-bar: 35;
-  --pc-bulk-actions: 36;
-  --pc-loading-panel: 37;
+  --pc-index-table-translate-offset: calc(#{rem(50px)} - var(--p-space-4));
+  --pc-index-table-table-header-offset: #{rem(52px)};
+  --pc-index-table-cell: 1;
+  --pc-index-table-sticky-cell: 31;
+  --pc-index-table-scroll-bar: 35;
+  --pc-index-table-bulk-actions: 36;
+  --pc-index-table-loading-panel: 37;
   position: relative;
   overflow: hidden;
   border-radius: inherit;
@@ -46,7 +46,7 @@ $loading-panel-height: rem(53px);
 
 .LoadingPanel {
   position: absolute;
-  z-index: var(--pc-loading-panel);
+  z-index: var(--pc-index-table-loading-panel);
   top: 0;
   left: 0;
   display: flex;
@@ -217,7 +217,7 @@ $loading-panel-height: rem(53px);
 }
 
 .TableCell {
-  z-index: var(--pc-cell);
+  z-index: var(--pc-index-table-cell);
   text-align: left;
   padding: var(--p-space-2) var(--p-space-4);
   white-space: nowrap;
@@ -230,7 +230,7 @@ $loading-panel-height: rem(53px);
 .TableCell-first {
   position: sticky;
   left: 0;
-  z-index: var(--pc-sticky-cell);
+  z-index: var(--pc-index-table-sticky-cell);
   padding: 0;
 }
 
@@ -240,7 +240,7 @@ $loading-panel-height: rem(53px);
 
   @include breakpoint-after($breakpoint-small) {
     position: sticky;
-    z-index: var(--pc-sticky-cell);
+    z-index: var(--pc-index-table-sticky-cell);
     padding: 0;
   }
 }
@@ -250,7 +250,7 @@ $loading-panel-height: rem(53px);
     left: 0;
     background-color: var(--p-surface);
     position: sticky;
-    z-index: var(--pc-sticky-cell);
+    z-index: var(--pc-index-table-sticky-cell);
   }
 
   .statusSuccess {
@@ -290,7 +290,7 @@ $loading-panel-height: rem(53px);
       position: sticky;
       right: 0;
       background-color: var(--p-surface);
-      z-index: var(--pc-sticky-cell);
+      z-index: var(--pc-index-table-sticky-cell);
     }
   }
 
@@ -335,7 +335,7 @@ $loading-panel-height: rem(53px);
   left: 0;
   right: 0;
   visibility: hidden;
-  z-index: var(--pc-loading-panel);
+  z-index: var(--pc-index-table-loading-panel);
 }
 
 .StickyTableHeader {
@@ -408,7 +408,7 @@ $loading-panel-height: rem(53px);
 .BulkActionsWrapper {
   visibility: visible;
   position: relative;
-  z-index: var(--pc-bulk-actions);
+  z-index: var(--pc-index-table-bulk-actions);
   top: 0;
   left: 0;
   right: 0;
@@ -421,7 +421,7 @@ $scroll-bar-border-radius: rem(4px);
 
 .ScrollBarContainer {
   position: sticky;
-  z-index: var(--pc-scroll-bar);
+  z-index: var(--pc-index-table-scroll-bar);
   bottom: 0;
   padding: rem(2px);
   border-top: border('divider');
@@ -469,8 +469,8 @@ $scroll-bar-border-radius: rem(4px);
 }
 
 .selectMode {
-  transform: translateY(calc(-1 * var(--pc-table-header-offset)));
-  margin-bottom: calc(-1 * var(--pc-table-header-offset));
+  transform: translateY(calc(-1 * var(--pc-index-table-table-header-offset)));
+  margin-bottom: calc(-1 * var(--pc-index-table-table-header-offset));
 }
 
 .EmptySearchResultWrapper {
@@ -478,8 +478,8 @@ $scroll-bar-border-radius: rem(4px);
 }
 
 .condensedRow {
-  width: calc(100% + var(--pc-translate-offset));
-  transform: translateX(calc(-1 * var(--pc-translate-offset)));
+  width: calc(100% + var(--pc-index-table-translate-offset));
+  transform: translateX(calc(-1 * var(--pc-index-table-translate-offset)));
   transition: transform var(--p-ease) var(--p-duration-200);
   display: flex;
   border-top: border('divider');
diff --git a/src/components/InlineError/InlineError.scss b/src/components/InlineError/InlineError.scss
index f0f93927120..6413933ded9 100644
--- a/src/components/InlineError/InlineError.scss
+++ b/src/components/InlineError/InlineError.scss
@@ -1,7 +1,7 @@
 @import '../../styles/common';
 
 .InlineError {
-  --p-error-icon-adjustment: var(--p-space-05);
+  --pc-inline-error-icon-adjustment: var(--p-space-05);
   display: flex;
   color: var(--p-text-critical);
   fill: var(--p-icon-critical);
@@ -9,6 +9,6 @@
 
 .Icon {
   fill: currentColor;
-  margin-left: calc(-1 * var(--p-error-icon-adjustment));
-  margin-right: calc(var(--p-space-1) + var(--p-error-icon-adjustment));
+  margin-left: calc(-1 * var(--pc-inline-error-icon-adjustment));
+  margin-right: calc(var(--p-space-1) + var(--pc-inline-error-icon-adjustment));
 }
diff --git a/src/components/KeyboardKey/KeyboardKey.scss b/src/components/KeyboardKey/KeyboardKey.scss
index 0554bfdeb9e..54f3ef77ada 100644
--- a/src/components/KeyboardKey/KeyboardKey.scss
+++ b/src/components/KeyboardKey/KeyboardKey.scss
@@ -3,15 +3,15 @@
 $key-base-height: rem(24px);
 
 .KeyboardKey {
-  --p-bottom-shadow-size: 2px;
+  --pc-keyboard-key-bottom-shadow-size: 2px;
   display: inline-block;
   height: $key-base-height;
-  margin: 0 calc(var(--p-space-1) / 2) var(--p-bottom-shadow-size);
+  margin: 0 calc(var(--p-space-1) / 2) var(--pc-keyboard-key-bottom-shadow-size);
   padding: 0 var(--p-space-1);
   background-color: var(--p-surface);
   box-shadow: 0 0 0 1px var(--p-border-subdued),
-    0 var(--p-bottom-shadow-size) 0 0 var(--p-surface),
-    0 var(--p-bottom-shadow-size) 0 1px var(--p-border-subdued);
+    0 var(--pc-keyboard-key-bottom-shadow-size) 0 0 var(--p-surface),
+    0 var(--pc-keyboard-key-bottom-shadow-size) 0 1px var(--p-border-subdued);
   border-radius: var(--p-border-radius-base);
   font-family: font-family();
   font-size: rem(12px);
diff --git a/src/components/Modal/components/Dialog/Dialog.scss b/src/components/Modal/components/Dialog/Dialog.scss
index cf70794b56a..3aad810ad12 100644
--- a/src/components/Modal/components/Dialog/Dialog.scss
+++ b/src/components/Modal/components/Dialog/Dialog.scss
@@ -29,7 +29,7 @@ $dangerous-magic-space-16: rem(64px);
 }
 
 .Modal {
-  --p-horizontal-spacing: var(--p-space-16);
+  --pc-dialog-horizontal-spacing: var(--p-space-16);
   position: fixed;
   right: 0;
   bottom: 0;
@@ -67,7 +67,7 @@ $dangerous-magic-space-16: rem(64px);
 
   &.sizeSmall {
     @include breakpoint-after(layout-width(page-with-nav)) {
-      max-width: calc(100% - var(--p-horizontal-spacing));
+      max-width: calc(100% - var(--pc-dialog-horizontal-spacing));
     }
 
     @include breakpoint-after($xsmall-width + $dangerous-magic-space-16) {
@@ -77,7 +77,7 @@ $dangerous-magic-space-16: rem(64px);
 
   &.sizeLarge {
     @include breakpoint-after(layout-width(page-with-nav)) {
-      max-width: calc(100% - var(--p-horizontal-spacing));
+      max-width: calc(100% - var(--pc-dialog-horizontal-spacing));
     }
 
     @include breakpoint-after($large-width + $dangerous-magic-space-16) {
diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
index 423688b2d2b..465134b9512 100644
--- a/src/components/Navigation/Navigation.scss
+++ b/src/components/Navigation/Navigation.scss
@@ -6,7 +6,7 @@ $active-indicator-width: rem(3px);
 $nav-max-width: rem(360px);
 
 .Navigation {
-  --icon-size: #{rem(20px)};
+  --pc-navigation-icon-size: #{rem(20px)};
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -176,7 +176,8 @@ $disabled-fade: 0.6;
 
 .ListItem-hasAction .Item {
   max-width: calc(
-    100% - var(--icon-size) + var(--p-space-4) * 2 + var(--p-space-1)
+    100% - var(--pc-navigation-icon-size) + var(--p-space-4) * 2 +
+      var(--p-space-1)
   );
 }
 
@@ -258,7 +259,9 @@ $secondary-item-font-size: rem(15px);
     font-weight: var(--p-font-weight-medium);
     line-height: nav(item-line-height);
     color: var(--p-text-subdued);
-    padding-left: calc(var(--icon-size) + var(--p-space-8) - var(--p-space-1));
+    padding-left: calc(
+      var(--pc-navigation-icon-size) + var(--p-space-8) - var(--p-space-1)
+    );
 
     &:hover {
       color: var(--p-text-subdued);
diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss
index e6a654fd746..039a9603610 100644
--- a/src/components/Navigation/_variables.scss
+++ b/src/components/Navigation/_variables.scss
@@ -75,15 +75,17 @@ $nav-animation-variables: (
   // hardcoding this variable for now because we need to rip out all instances
   // of filter() eventually but can't for this one right now. The value is the
   // equivalent value for filter('icon').
-  --p-filter-icon: brightness(0) saturate(100%) invert(36%) sepia(13%)
-    saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%);
-  --p-filter-icon-action-primary: brightness(0) saturate(100%) invert(20%)
-    sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%) contrast(101%);
-  --p-filter-icon-on-interactive: brightness(0) saturate(100%) invert(100%);
+  --pc-navigation-filter-icon: brightness(0) saturate(100%) invert(36%)
+    sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%);
+  --pc-navigation-filter-icon-action-primary: brightness(0) saturate(100%)
+    invert(20%) sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%)
+    contrast(101%);
+  --pc-navigation-filter-icon-on-interactive: brightness(0) saturate(100%)
+    invert(100%);
 
   @include recolor-icon(
     $fill-color: var(--p-icon),
-    $filter-color: var(--p-filter-icon)
+    $filter-color: var(--pc-navigation-filter-icon)
   );
   flex-shrink: 0;
   align-self: flex-start;
@@ -102,7 +104,7 @@ $nav-animation-variables: (
   .Item.keyFocused & {
     @include recolor-icon(
       $fill-color: var(--p-icon),
-      $filter-color: var(--p-filter-icon)
+      $filter-color: var(--pc-navigation-filter-icon)
     );
   }
 
@@ -113,7 +115,7 @@ $nav-animation-variables: (
   .Item-selected.keyFocused & {
     @include recolor-icon(
       $fill-color: var(--p-action-primary),
-      $filter-color: var(--p-filter-icon-action-primary)
+      $filter-color: var(--pc-navigation-filter-icon-action-primary)
     );
   }
 
diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss
index a439cb7e492..9b0ef5020a7 100644
--- a/src/components/ProgressBar/ProgressBar.scss
+++ b/src/components/ProgressBar/ProgressBar.scss
@@ -20,7 +20,7 @@
 .ProgressBar {
   overflow: hidden;
   width: 100%;
-  background-color: var(--p-progressbar-background);
+  background-color: var(--pc-progress-bar-background);
   border-radius: var(--p-border-radius-base);
 
   @media (forced-colors: active) {
@@ -41,29 +41,29 @@
 }
 
 .colorHighlight {
-  --p-progressbar-background: var(--p-surface-neutral);
-  --p-progressbar-indicator: var(--p-border-highlight);
+  --pc-progress-bar-background: var(--p-surface-neutral);
+  --pc-progress-bar-indicator: var(--p-border-highlight);
 }
 
 .colorPrimary {
-  --p-progressbar-background: var(--p-surface-neutral);
-  --p-progressbar-indicator: var(--p-action-primary);
+  --pc-progress-bar-background: var(--p-surface-neutral);
+  --pc-progress-bar-indicator: var(--p-action-primary);
 }
 
 .colorSuccess {
-  --p-progressbar-background: var(--p-surface-neutral);
-  --p-progressbar-indicator: var(--p-border-success);
+  --pc-progress-bar-background: var(--p-surface-neutral);
+  --pc-progress-bar-indicator: var(--p-border-success);
 }
 
 .colorCritical {
-  --p-progressbar-background: var(--p-surface-neutral);
-  --p-progressbar-indicator: var(--p-interactive-critical);
+  --pc-progress-bar-background: var(--p-surface-neutral);
+  --pc-progress-bar-indicator: var(--p-interactive-critical);
 }
 
 .Indicator {
   height: inherit;
   width: 0;
-  background-color: var(--p-progressbar-indicator);
+  background-color: var(--pc-progress-bar-indicator);
 
   @media screen and (-ms-high-contrast: active) {
     border: progress-bar-height() solid
diff --git a/src/components/RangeSlider/components/DualThumb/DualThumb.scss b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
index 5e9193b807d..845a3364577 100644
--- a/src/components/RangeSlider/components/DualThumb/DualThumb.scss
+++ b/src/components/RangeSlider/components/DualThumb/DualThumb.scss
@@ -6,8 +6,8 @@ $range-wrapper: rem(28px);
 $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
 
 .Wrapper {
-  --pc-input: 10;
-  --pc-output: 20;
+  --pc-dual-thumb-input: 10;
+  --pc-dual-thumb-output: 20;
   position: relative;
   width: 100%;
   display: flex;
@@ -35,25 +35,39 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
   height: $range-track-height;
   border-radius: $range-thumb-size;
 
-  --unselected-range: transparent;
-  --selected-range: #{var(--p-interactive)};
-  --gradient-colors: var(--unselected-range) 0%,
-    var(--unselected-range) var(--Polaris-RangeSlider-progress-lower),
-    var(--selected-range) var(--Polaris-RangeSlider-progress-lower),
-    var(--selected-range) var(--Polaris-RangeSlider-progress-upper),
-    var(--unselected-range) var(--Polaris-RangeSlider-progress-upper),
-    var(--unselected-range) 100%;
-  background-image: linear-gradient(to right, var(--gradient-colors));
+  --pc-dual-thumb-unselected-range: transparent;
+  --pc-dual-thumb-selected-range: #{var(--p-interactive)};
+  --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
+    var(--pc-dual-thumb-unselected-range)
+      var(--Polaris-RangeSlider-progress-lower),
+    var(--pc-dual-thumb-selected-range)
+      var(--Polaris-RangeSlider-progress-lower),
+    var(--pc-dual-thumb-selected-range)
+      var(--Polaris-RangeSlider-progress-upper),
+    var(--pc-dual-thumb-unselected-range)
+      var(--Polaris-RangeSlider-progress-upper),
+    var(--pc-dual-thumb-unselected-range) 100%;
+  background-image: linear-gradient(
+    to right,
+    var(--pc-dual-thumb-gradient-colors)
+  );
 
   .error & {
-    --selected-range: #{var(--p-action-critical)};
-    --gradient-colors: var(--unselected-range) 0%,
-      var(--unselected-range) var(--Polaris-RangeSlider-progress-lower),
-      var(--selected-range) var(--Polaris-RangeSlider-progress-lower),
-      var(--selected-range) var(--Polaris-RangeSlider-progress-upper),
-      var(--unselected-range) var(--Polaris-RangeSlider-progress-upper),
-      var(--unselected-range) 100%;
-    background-image: linear-gradient(to right, var(--gradient-colors));
+    --pc-dual-thumb-selected-range: #{var(--p-action-critical)};
+    --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%,
+      var(--pc-dual-thumb-unselected-range)
+        var(--Polaris-RangeSlider-progress-lower),
+      var(--pc-dual-thumb-selected-range)
+        var(--Polaris-RangeSlider-progress-lower),
+      var(--pc-dual-thumb-selected-range)
+        var(--Polaris-RangeSlider-progress-upper),
+      var(--pc-dual-thumb-unselected-range)
+        var(--Polaris-RangeSlider-progress-upper),
+      var(--pc-dual-thumb-unselected-range) 100%;
+    background-image: linear-gradient(
+      to right,
+      var(--pc-dual-thumb-gradient-colors)
+    );
   }
 
   .disabled & {
@@ -68,7 +82,7 @@ $range-thumb-border-error: rem(2px) solid var(--p-border-critical);
 .Thumbs {
   @include focus-ring($size: 'wide', $border-width: border-width());
   position: absolute;
-  z-index: var(--pc-input);
+  z-index: var(--pc-dual-thumb-input);
   padding: 0;
   width: $range-thumb-size;
   height: $range-thumb-size;
@@ -120,7 +134,7 @@ $range-output-spacing: rem(16px);
 
 .Output {
   position: absolute;
-  z-index: var(--pc-output);
+  z-index: var(--pc-dual-thumb-output);
   bottom: var(--p-range-slider-thumb-size-active);
   opacity: 0;
   visibility: hidden;
diff --git a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
index ab9518d45d0..b0f0f66e08c 100644
--- a/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
+++ b/src/components/RangeSlider/components/SingleThumb/SingleThumb.scss
@@ -2,8 +2,8 @@
 @import '../../RangeSlider';
 
 .SingleThumb {
-  --pc-input: 10;
-  --pc-output: 20;
+  --pc-single-thumb-input: 10;
+  --pc-single-thumb-output: 20;
   display: flex;
   align-items: center;
 
@@ -47,8 +47,8 @@
 }
 
 .Input {
-  --progress-lower: #{var(--p-interactive)};
-  --progress-upper: transparent;
+  --pc-single-thumb-progress-lower: #{var(--p-interactive)};
+  --pc-single-thumb-progress-upper: transparent;
   // create-react-app v2 leverages postcss-preset-env to transpile modern CSS
   // into something kinda supported by older browsers. Unfortunately its
   // custom properties transpiler has a bug that means it doesn't like multiple
@@ -57,10 +57,10 @@
   // so that we only use one custom-property in the linear-gradient.
   // See https://github.com/Shopify/polaris-react/issues/441 and
   // https://github.com/postcss/postcss-custom-properties/issues/150
-  --gradient-colors: var(--progress-lower, transparent) 0%,
-    var(--progress-lower, transparent) var(--Polaris-RangeSlider-progress, 0%),
-    var(--progress-upper, transparent) var(--Polaris-RangeSlider-progress, 100%),
-    var(--progress-upper, transparent) 100%;
+  --pc-single-thumb-gradient-colors: var(--pc-single-thumb-progress-lower) 0%,
+    var(--pc-single-thumb-progress-lower) var(--Polaris-RangeSlider-progress),
+    var(--pc-single-thumb-progress-upper) var(--Polaris-RangeSlider-progress),
+    var(--pc-single-thumb-progress-upper) 100%;
 
   @mixin rangeSliderThumbPosition($size) {
     margin-top: calc(-1 * (#{$size} - #{$range-track-height}) / 2);
@@ -72,14 +72,17 @@
 
   @include unstyled-input;
   position: relative;
-  z-index: var(--pc-input);
+  z-index: var(--pc-single-thumb-input);
   flex: 1 1 auto;
 
   @include range-track-selectors {
     cursor: pointer;
     width: 100%;
     height: $range-track-height;
-    background-image: linear-gradient(to right, var(--gradient-colors));
+    background-image: linear-gradient(
+      to right,
+      var(--pc-single-thumb-gradient-colors)
+    );
     border: none;
     border-radius: $range-track-height;
   }
@@ -131,7 +134,7 @@
   }
 
   .error & {
-    --progress-lower: #{var(--p-action-critical)};
+    --pc-single-thumb-progress-lower: #{var(--p-action-critical)};
 
     @include range-thumb-selectors {
       border-color: var(--p-action-critical);
@@ -164,7 +167,7 @@ $range-output-spacing: rem(16px);
 
 .Output {
   position: absolute;
-  z-index: var(--pc-output);
+  z-index: var(--pc-single-thumb-output);
   bottom: $range-thumb-size;
   left: var(--Polaris-RangeSlider-progress);
   transform: translateX($range-output-translate-x);
diff --git a/src/components/ResourceItem/ResourceItem.scss b/src/components/ResourceItem/ResourceItem.scss
index 0a6f54c8021..2d8c34e2a29 100644
--- a/src/components/ResourceItem/ResourceItem.scss
+++ b/src/components/ResourceItem/ResourceItem.scss
@@ -34,7 +34,9 @@ $resource-list-item-variables: (
 }
 
 .ResourceItem {
-  --p-translate-offset: calc(#{rem(48px)} - #{rem(12px)} + var(--p-space-1));
+  --pc-resource-item-offset: calc(
+    #{rem(48px)} - #{rem(12px)} + var(--p-space-1)
+  );
   position: relative;
   outline: none;
   cursor: pointer;
@@ -156,10 +158,10 @@ $resource-list-item-variables: (
 }
 
 .selectable {
-  width: calc(100% + var(--p-translate-offset));
-  transform: translateX(calc(-1 * var(--p-translate-offset)));
+  width: calc(100% + var(--pc-resource-item-offset));
+  transform: translateX(calc(-1 * var(--pc-resource-item-offset)));
   transition: transform var(--p-ease) var(--p-duration-200);
-  margin-right: calc(-1 * var(--p-translate-offset));
+  margin-right: calc(-1 * var(--pc-resource-item-offset));
 
   &.selectMode {
     transform: translateX(0);
diff --git a/src/components/Select/Select.scss b/src/components/Select/Select.scss
index 7673668cbf3..dcba6ed968a 100644
--- a/src/components/Select/Select.scss
+++ b/src/components/Select/Select.scss
@@ -1,9 +1,9 @@
 @import '../../styles/common';
 
 .Select {
-  --pc-backdrop: 10;
-  --pc-content: 20;
-  --pc-input: 30;
+  --pc-select-backdrop: 10;
+  --pc-select-content: 20;
+  --pc-select-input: 30;
   position: relative;
 
   // IE 11 fix to remove default dropdown arrow
@@ -41,7 +41,7 @@
 .Content {
   @include text-style-input;
   position: relative;
-  z-index: var(--pc-content);
+  z-index: var(--pc-select-content);
   display: flex;
   align-items: center;
   width: 100%;
@@ -80,7 +80,7 @@
   text-rendering: auto;
   top: 0;
   left: 0;
-  z-index: var(--pc-input);
+  z-index: var(--pc-select-input);
   width: 100%;
   height: 100%;
   margin: 0;
@@ -90,7 +90,7 @@
 }
 
 .Backdrop {
-  z-index: var(--pc-backdrop);
+  z-index: var(--pc-select-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/components/Stack/Stack.scss b/src/components/Stack/Stack.scss
index b0d77160c4c..ced64a935a2 100644
--- a/src/components/Stack/Stack.scss
+++ b/src/components/Stack/Stack.scss
@@ -1,16 +1,16 @@
 @import '../../styles/common';
 
 .Stack {
-  --p-stack-spacing: var(--p-space-4);
+  --pc-stack-spacing: var(--p-space-4);
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
-  margin-top: calc(-1 * var(--p-stack-spacing));
-  margin-left: calc(-1 * var(--p-stack-spacing));
+  margin-top: calc(-1 * var(--pc-stack-spacing));
+  margin-left: calc(-1 * var(--pc-stack-spacing));
 
   > .Item {
-    margin-top: var(--p-stack-spacing);
-    margin-left: var(--p-stack-spacing);
+    margin-top: var(--pc-stack-spacing);
+    margin-left: var(--pc-stack-spacing);
     max-width: 100%;
   }
 }
@@ -20,27 +20,27 @@
 }
 
 .spacingNone {
-  --p-stack-spacing: var(--p-space-0);
+  --pc-stack-spacing: var(--p-space-0);
 }
 
 .spacingExtraTight {
-  --p-stack-spacing: var(--p-space-1);
+  --pc-stack-spacing: var(--p-space-1);
 }
 
 .spacingTight {
-  --p-stack-spacing: var(--p-space-2);
+  --pc-stack-spacing: var(--p-space-2);
 }
 
 .spacingBaseTight {
-  --p-stack-spacing: var(--p-space-3);
+  --pc-stack-spacing: var(--p-space-3);
 }
 
 .spacingLoose {
-  --p-stack-spacing: var(--p-space-5);
+  --pc-stack-spacing: var(--p-space-5);
 }
 
 .spacingExtraLoose {
-  --p-stack-spacing: var(--p-space-8);
+  --pc-stack-spacing: var(--p-space-8);
 }
 
 .distributionLeading {
diff --git a/src/components/TextField/TextField.scss b/src/components/TextField/TextField.scss
index 912c91abd77..8950eca19cf 100644
--- a/src/components/TextField/TextField.scss
+++ b/src/components/TextField/TextField.scss
@@ -7,8 +7,8 @@ $spinner-icon-size: rem(12px);
 $prefix-horizontal-spacing: var(--p-space-2);
 
 .TextField {
-  --pc-contents: 20;
-  --pc-backdrop: 10;
+  --pc-text-field-contents: 20;
+  --pc-text-field-backdrop: 10;
   @include text-style-input;
   position: relative;
   display: flex;
@@ -87,7 +87,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 .Input {
   @include text-style-input;
   position: relative;
-  z-index: var(--pc-contents);
+  z-index: var(--pc-text-field-contents);
   display: block;
   flex: 1 1 0%;
   width: 100%;
@@ -167,7 +167,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 .Backdrop {
   @include focus-ring($border-width: border-width());
   position: absolute;
-  z-index: var(--pc-backdrop);
+  z-index: var(--pc-text-field-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
@@ -182,7 +182,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 .Prefix,
 .Suffix {
   position: relative;
-  z-index: var(--pc-contents);
+  z-index: var(--pc-text-field-contents);
   flex: 0 0 auto;
   color: var(--p-text-subdued);
   user-select: none;
@@ -200,7 +200,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 
 .CharacterCount {
   @include text-emphasis-subdued;
-  z-index: var(--pc-contents);
+  z-index: var(--pc-text-field-contents);
   margin: 0 $backdrop-horizontal-spacing 0 $addon-horizontal-spacing;
   pointer-events: none;
   text-align: right;
@@ -215,7 +215,7 @@ $prefix-horizontal-spacing: var(--p-space-2);
 .ClearButton {
   @include focus-ring;
   @include unstyled-button;
-  z-index: var(--pc-contents);
+  z-index: var(--pc-text-field-contents);
   margin: 0 $backdrop-horizontal-spacing 0 $addon-horizontal-spacing;
 
   &:focus:enabled {
@@ -228,11 +228,11 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .Spinner {
-  --p-text-field-spinner-offset-large: calc(
+  --pc-text-field-spinner-offset-large: calc(
     var(--p-text-field-spinner-offset) + #{border-width()}
   );
-  z-index: var(--pc-contents);
-  margin: var(--p-text-field-spinner-offset-large);
+  z-index: var(--pc-text-field-contents);
+  margin: var(--pc-text-field-spinner-offset-large);
   color: var(--p-icon);
   display: flex;
   align-self: stretch;
@@ -267,11 +267,11 @@ $prefix-horizontal-spacing: var(--p-space-2);
 }
 
 .Segment {
-  --p-text-field-spinner-border-radius: calc(
+  --pc-text-field-spinner-border-radius: calc(
     var(--p-border-radius-base) - var(--p-text-field-spinner-offset)
   );
   background: var(--p-surface-neutral);
-  border-radius: var(--p-text-field-spinner-border-radius);
+  border-radius: var(--pc-text-field-spinner-border-radius);
   display: flex;
   flex: 1 1 0%;
   justify-content: center;
@@ -288,12 +288,12 @@ $prefix-horizontal-spacing: var(--p-space-2);
   }
 
   &:first-child {
-    border-top-right-radius: var(--p-text-field-spinner-border-radius);
+    border-top-right-radius: var(--pc-text-field-spinner-border-radius);
     margin-bottom: var(--p-text-field-spinner-offset);
   }
 
   &:last-child {
-    border-bottom-right-radius: var(--p-text-field-spinner-border-radius);
+    border-bottom-right-radius: var(--pc-text-field-spinner-border-radius);
   }
 
   &:not(:first-child) {
diff --git a/src/components/TextStyle/TextStyle.scss b/src/components/TextStyle/TextStyle.scss
index 612795183b6..30e8b155943 100644
--- a/src/components/TextStyle/TextStyle.scss
+++ b/src/components/TextStyle/TextStyle.scss
@@ -9,14 +9,12 @@
 }
 
 .variationCode {
-  --p-code-padding: 0 var(--p-space-1);
-  --p-code-font-size: 1.15em;
   position: relative;
-  padding: var(--p-code-padding);
+  padding: 0 var(--p-space-1);
   border-radius: border-radius();
   background-color: var(--p-surface-subdued);
   display: inline-block;
-  font-size: var(--p-code-font-size);
+  font-size: 1.15em;
   box-shadow: inset 0 0 0 1px var(--p-border-subdued);
 
   &::after {
diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
index 9be206f6f84..b998d8e9994 100644
--- a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
+++ b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -3,8 +3,8 @@
 $content-max-width: rem(200px);
 
 .TooltipOverlay {
-  --p-offset-from-activator: var(--p-space-1);
-  margin: var(--p-offset-from-activator) var(--p-space-4) var(--p-space-4);
+  --pc-tooltip-overlay-offset: var(--p-space-1);
+  margin: var(--pc-tooltip-overlay-offset) var(--p-space-4) var(--p-space-4);
   opacity: 1;
   box-shadow: var(--p-popover-shadow);
   border-radius: var(--p-border-radius-base);
@@ -23,7 +23,7 @@ $content-max-width: rem(200px);
 }
 
 .positionedAbove {
-  margin: var(--p-space-4) var(--p-space-4) var(--p-offset-from-activator);
+  margin: var(--p-space-4) var(--p-space-4) var(--pc-tooltip-overlay-offset);
 }
 
 .Content {
diff --git a/src/components/TopBar/components/SearchField/SearchField.scss b/src/components/TopBar/components/SearchField/SearchField.scss
index 97f453dd0e8..b390381dd4f 100644
--- a/src/components/TopBar/components/SearchField/SearchField.scss
+++ b/src/components/TopBar/components/SearchField/SearchField.scss
@@ -7,10 +7,10 @@ $new-input-height: rem(36px);
 $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
 
 .SearchField {
-  --pc-backdrop: 1;
-  --pc-input: 2;
-  --pc-icon: 3;
-  --pc-action: 3;
+  --pc-search-field-backdrop: 1;
+  --pc-search-field-input: 2;
+  --pc-search-field-icon: 3;
+  --pc-search-field-action: 3;
   z-index: var(--p-z-11);
   position: relative;
   display: flex;
@@ -66,7 +66,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
 
 .Input {
   @include text-style-input;
-  z-index: var(--pc-input);
+  z-index: var(--pc-search-field-input);
   height: $new-input-height;
   width: 100%;
   padding: 0 0 0 $search-icon-width;
@@ -93,7 +93,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
 .Icon {
   @include recolor-icon(var(--p-icon));
   position: absolute;
-  z-index: var(--pc-icon);
+  z-index: var(--pc-search-field-icon);
   top: 50%;
   left: var(--p-space-2);
   display: flex;
@@ -110,7 +110,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
   @include recolor-icon(var(--p-icon));
   @include focus-ring($size: 'wide');
   position: relative;
-  z-index: var(--pc-action);
+  z-index: var(--pc-search-field-action);
   border: none;
   appearance: none;
   background: transparent;
@@ -138,7 +138,7 @@ $search-icon-width: calc(#{$icon-size} + var(--p-space-4));
 .Backdrop {
   @include focus-ring;
   position: absolute;
-  z-index: var(--pc-backdrop);
+  z-index: var(--pc-search-field-backdrop);
   top: 0;
   right: 0;
   bottom: 0;
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
index aba6b3cb0fe..801d0b01f9a 100644
--- a/src/styles/shared/_buttons.scss
+++ b/src/styles/shared/_buttons.scss
@@ -78,16 +78,16 @@
 
 @mixin button-filled() {
   @include focus-ring($border-width: 0);
-  background: var(--p-button-color);
+  background: var(--pc-button-color);
   border-width: 0;
   border-color: transparent;
   box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
-  color: var(--p-button-text);
+  color: var(--pc-button-text);
 
   &:hover {
-    background: var(--p-button-color-hover);
+    background: var(--pc-button-color-hover);
     border-color: transparent;
-    color: var(--p-button-text);
+    color: var(--pc-button-text);
   }
 
   &:focus {
@@ -96,20 +96,20 @@
   }
 
   &:active {
-    background: var(--p-button-color-active);
+    background: var(--pc-button-color-active);
     border-color: transparent;
     box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
   }
 
   &.pressed {
-    color: var(--p-button-text);
-    background: var(--p-button-color-depressed);
+    color: var(--pc-button-text);
+    background: var(--pc-button-color-depressed);
     border-color: transparent;
     box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
 
     &:hover,
     &:focus {
-      background: var(--p-button-color-depressed);
+      background: var(--pc-button-color-depressed);
       box-shadow: var(--p-button-drop-shadow), var(--p-button-inner-shadow);
     }
   }
@@ -147,7 +147,7 @@
     background: var(--p-action-secondary-pressed);
     border: border-width() solid var(--p-border);
     box-shadow: none;
-    color: var(--p-button-text);
+    color: var(--pc-button-text);
   }
 
   &.disabled {