diff --git a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
index bcb7192705..62da96fb92 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_colors.scss
@@ -53,6 +53,7 @@
     // Determine class name for $value == 50
     $classname: ".color-#{"" + $name}-#{$value}";
 
+    /* stylelint-disable block-closing-brace-newline-after */
     // This should be numeric, not string
     @if ($value == 50) {
       $classname: ".color-#{"" + $name}-0#{$value}";
@@ -78,6 +79,7 @@
         text-transform: uppercase;
       }
     }
+    /* stylelint-enable block-closing-brace-newline-after */
   }
 }
 /* stylelint-enable max-nesting-depth */
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
index 56c8be2359..5486a18a3d 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_avatar.html.erb
@@ -52,7 +52,7 @@ end
   <% end %>
 
   <% if !component.initials && !component.image %>
-    <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic"></pds-icon>
+    <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic"></pds-icon>
   <% end %>
 
   <% if component.image %>
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
index 9be345e96d..916059c35d 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
@@ -1,6 +1,6 @@
 <%
   component_description = component.type === "success" ? "Success" : "Loading..."
-  stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_400]
+  stroke_color = "var(--pine-color-brand)"
 %>
 
 <div class="
diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
index 458e7f9a66..f672f41f02 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_progress_bar.html.erb
@@ -2,7 +2,7 @@
 animate = component.animate.nil? ? true : component.animate
 content = component.label ? "#{component.label}: " : ""
 content << "#{component.percent}%&nbsp;progress"
-color = component.color || SageTokens::COLOR_PALETTE[:MERCURY_500]
+color = component.color || "var(--pine-color-brand)"
 %>
 
 <div
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index 1d71b05beb..52608a77e1 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -30,7 +30,7 @@ $-avatar-ring-colors: (
   ),
   orange: (
     main: var(--pine-color-brand),
-    bg: var(--pine-color-mercury-150)
+    bg: var(--pine-color-grey-150)
   ),
   red: (
     main: var(--pine-color-danger),
@@ -64,7 +64,7 @@ $-avatar-group-item-sizes: (
   width: $-avatar-min-size;
   height: $-avatar-min-size;
   border-radius: var(--pine-border-radius-full);
-  background-color: var(--pine-color-mercury-050);
+  background-color: var(--pine-color-grey-050);
 
   // Documentation-specific styles
   .sage-avatar-wrapper > & {
diff --git a/packages/sage-react/lib/Avatar/Avatar.jsx b/packages/sage-react/lib/Avatar/Avatar.jsx
index aca94f170b..cce98299c2 100644
--- a/packages/sage-react/lib/Avatar/Avatar.jsx
+++ b/packages/sage-react/lib/Avatar/Avatar.jsx
@@ -82,7 +82,7 @@ export const Avatar = ({
         <img alt={image.alt || ''} className="sage-avatar__image" src={image.src} id={image.id} />
       )}
       {(!image.src || useFallbackGraphic) && (
-        <pds-icon name="user-filled" color="var(--pine-color-mercury-500)" class="sage-avatar__graphic" />
+        <pds-icon name="user-filled" color="var(--pine-color-brand)" class="sage-avatar__graphic" />
       )}
     </div>
   );
diff --git a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
index 2fce8af65e..5a75680cd3 100644
--- a/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
+++ b/packages/sage-react/lib/ProgressBar/ProgressBar.jsx
@@ -81,7 +81,7 @@ ProgressBar.defaultProps = {
   animate: true,
   backgroundColor: null,
   className: null,
-  color: ProgressBar.COLORS.MERCURY_500,
+  color: ProgressBar.COLORS.GREY_500,
   disableTooltip: false,
   displayPercent: false,
   label: null,
diff --git a/packages/sage-react/package.json b/packages/sage-react/package.json
index 18482d2b72..9123fa62f3 100644
--- a/packages/sage-react/package.json
+++ b/packages/sage-react/package.json
@@ -76,6 +76,7 @@
     "npm-run-all": "^4.1.5",
     "react-is": "16.13.1",
     "react-test-renderer": "16.13.1",
+    "resize-observer-polyfill": "^1.5.1",
     "sass-loader": "^10.0.2",
     "typescript": "4.0.3",
     "url-loader": "^4.1.0",
@@ -91,6 +92,7 @@
     "html-react-parser": "^0.14.2",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
+    "raf": "^3.4.1",
     "react-docgen": "^5.4.3",
     "react-sortablejs": "6.0.0",
     "react-uuid": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 7f9896e610..b217f448de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2849,9 +2849,9 @@
     "@octokit/openapi-types" "^12.11.0"
 
 "@pine-ds/icons@^9.12.0":
-  version "9.12.0"
-  resolved "https://registry.yarnpkg.com/@pine-ds/icons/-/icons-9.12.0.tgz#0fd44b1f24492784f03d50a2897469e643a74634"
-  integrity sha512-m0xQYFrxFQ+ycffZvwyv2L0goSULkGInqI8+xhZgSQTPC7J1zROrTfNJC/gAdx07HMqn1h4QUVlPu7dyqr9cGg==
+  version "9.13.0"
+  resolved "https://registry.yarnpkg.com/@pine-ds/icons/-/icons-9.13.0.tgz#f6e1849641f1dbe77023179343d84924865dadf7"
+  integrity sha512-c2S96Kf36zeU4tD72tNmLyfmnT6+RQRXfmGWYi/DpmczbF5Dy6vVh84TFXz7o7QPhlETWVdnVwZP0xMyH8pkQA==
   dependencies:
     "@stencil/core" "4.38.3"
 
@@ -16420,6 +16420,13 @@ quick-lru@^4.0.1:
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+raf@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+  dependencies:
+    performance-now "^2.1.0"
+
 ramda@^0.28.0:
   version "0.28.0"
   resolved "https://registry.npmjs.org/ramda/-/ramda-0.28.0.tgz"
@@ -17228,6 +17235,11 @@ requires-port@^1.0.0:
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"