From 7a1c61e8579e46a028e7a6e1f4bfed3131a6f1ad Mon Sep 17 00:00:00 2001
From: Kyle Durand <kyle.durand@shopify.com>
Date: Wed, 1 Dec 2021 15:01:14 -0500
Subject: [PATCH] Rename misc custom properties

---
 .../SecondaryAction/SecondaryAction.scss      |  6 ++---
 src/components/Avatar/Avatar.scss             | 22 +++++++++----------
 src/components/Breadcrumbs/Breadcrumbs.scss   | 10 ++++-----
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
index 20fcf76c0f1..11695e75ac0 100644
--- a/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
+++ b/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss
@@ -3,7 +3,7 @@
 $breakpoint: 768px;
 
 .SecondaryAction {
-  --pc-button-spacing: var(--p-space-3);
+  --pc-secondary-action-button-spacing: var(--p-space-3);
   // stylelint-disable declaration-no-important
   a,
   button {
@@ -11,8 +11,8 @@ $breakpoint: 768px;
     background: transparent !important;
     box-shadow: none !important;
     border-radius: var(--p-border-radius-base) !important;
-    padding-left: var(--pc-button-spacing);
-    padding-right: var(--pc-button-spacing);
+    padding-left: var(--pc-secondary-action-button-spacing);
+    padding-right: var(--pc-secondary-action-button-spacing);
     // stylelint-disable-next-line selector-max-specificity
     &:hover {
       background: var(--p-background-hovered) !important;
diff --git a/src/components/Avatar/Avatar.scss b/src/components/Avatar/Avatar.scss
index a3d52386d36..aecb8d17787 100644
--- a/src/components/Avatar/Avatar.scss
+++ b/src/components/Avatar/Avatar.scss
@@ -1,18 +1,18 @@
 @import '../../styles/common';
 
 .Avatar {
-  --pc-extra-small-size: var(--p-space-6);
-  --pc-small-size: var(--p-space-8);
-  --pc-medium-size: var(--p-space-10);
-  --pc-large-size: 60px;
+  --pc-avatar-extra-small-size: var(--p-space-6);
+  --pc-avatar-small-size: var(--p-space-8);
+  --pc-avatar-medium-size: var(--p-space-10);
+  --pc-avatar-large-size: 60px;
   position: relative;
   display: block;
   overflow: hidden;
-  min-width: var(--pc-extra-small-size);
+  min-width: var(--pc-avatar-extra-small-size);
   max-width: 100%;
   background: var(--p-surface-neutral);
   color: var(--p-icon-subdued);
-  border-radius: calc(var(--pc-large-size) / 2);
+  border-radius: calc(var(--pc-avatar-large-size) / 2);
   user-select: none;
 
   @media (forced-colors: active) {
@@ -31,19 +31,19 @@
 }
 
 .sizeExtraSmall {
-  width: var(--pc-extra-small-size);
+  width: var(--pc-avatar-extra-small-size);
 }
 
 .sizeSmall {
-  width: var(--pc-small-size);
+  width: var(--pc-avatar-small-size);
 }
 
 .sizeMedium {
-  width: var(--pc-medium-size);
+  width: var(--pc-avatar-medium-size);
 }
 
 .sizeLarge {
-  width: var(--pc-large-size);
+  width: var(--pc-avatar-large-size);
 }
 
 .styleOne {
@@ -82,7 +82,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--p-background);
-  border-radius: calc(var(--pc-large-size) / 2);
+  border-radius: calc(var(--pc-avatar-large-size) / 2);
   transform: translate(-50%, -50%);
   object-fit: cover;
 }
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
index 5a8bd3c8774..9d676e6a131 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.scss
+++ b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -52,11 +52,11 @@
 }
 
 .Icon {
-  --pc-icon-size: 20px;
+  --pc-breadcrumbs-icon-size: 20px;
   @include recolor-icon(var(--p-icon));
-  width: var(--pc-icon-size);
-  height: var(--pc-icon-size);
-  margin: calc(-0.5 * var(--pc-icon-size)) 0 calc(-0.5 * var(--pc-icon-size))
-    calc(-1 * var(--p-space2));
+  width: var(--pc-breadcrumbs-icon-size);
+  height: var(--pc-breadcrumbs-icon-size);
+  margin: calc(-0.5 * var(--pc-breadcrumbs-icon-size)) 0
+    calc(-0.5 * var(--pc-breadcrumbs-icon-size)) calc(-1 * var(--p-space2));
   margin: 0;
 }