From 2f43f1d435529ff04f4daf89fc0bc7cda3ff9ab9 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Mon, 26 Aug 2024 19:40:29 -0500
Subject: [PATCH] fix: update grey color token to lower greys

---
 .../sage-frontend/stylesheets/docs/_grid.scss    |  2 +-
 .../stylesheets/docs/_rouge_theme.scss           |  2 +-
 .../sage-frontend/stylesheets/docs/_specs.scss   |  4 ++--
 .../sage-frontend/stylesheets/docs/_text.scss    |  2 +-
 .../lib/stylesheets/components/_alert.scss       |  4 ++--
 .../lib/stylesheets/components/_assistant.scss   |  4 ++--
 .../lib/stylesheets/components/_avatar.scss      |  4 ++--
 .../lib/stylesheets/components/_banner.scss      |  2 +-
 .../lib/stylesheets/components/_button.scss      | 16 ++++++++--------
 .../lib/stylesheets/components/_card.scss        |  4 ++--
 .../stylesheets/components/_catalog_item.scss    |  2 +-
 .../lib/stylesheets/components/_checkbox.scss    |  4 ++--
 .../lib/stylesheets/components/_choice.scss      |  2 +-
 .../lib/stylesheets/components/_copy_text.scss   |  2 +-
 .../lib/stylesheets/components/_data_card.scss   |  4 ++--
 .../lib/stylesheets/components/_divider.scss     |  2 +-
 .../lib/stylesheets/components/_dropdown.scss    |  8 ++++----
 .../stylesheets/components/_expandable_card.scss |  2 +-
 .../lib/stylesheets/components/_hint.scss        |  2 +-
 .../lib/stylesheets/components/_indicator.scss   |  2 +-
 .../lib/stylesheets/components/_input_group.scss |  2 +-
 .../lib/stylesheets/components/_meter.scss       |  2 +-
 .../lib/stylesheets/components/_nav.scss         |  6 +++---
 .../stylesheets/components/_page_heading.scss    |  2 +-
 .../lib/stylesheets/components/_pagination.scss  |  2 +-
 .../lib/stylesheets/components/_panel.scss       |  2 +-
 .../stylesheets/components/_panel_controls.scss  |  2 +-
 .../stylesheets/components/_progress_bar.scss    |  2 +-
 .../lib/stylesheets/components/_search.scss      |  2 +-
 .../lib/stylesheets/components/_sortable.scss    |  4 ++--
 .../lib/stylesheets/components/_switch.scss      |  6 +++---
 .../lib/stylesheets/components/_tab.scss         |  4 ++--
 .../lib/stylesheets/components/_table.scss       |  2 +-
 .../lib/stylesheets/components/_tabs.scss        |  4 ++--
 .../lib/stylesheets/components/_tag.scss         |  4 ++--
 .../lib/stylesheets/core/_variables.scss         |  6 +++---
 .../lib/stylesheets/tokens/_border.scss          |  4 ++--
 .../stylesheets/tokens/_border_interactive.scss  |  4 ++--
 packages/sage-react/lib/Divider/Divider.jsx      |  2 +-
 39 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
index 64472af66b..bdd18a82ce 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_grid.scss
@@ -9,7 +9,7 @@
   margin-bottom: sage-spacing(md);
   padding: sage-spacing(xs) sage-spacing(md);
   text-align: center;
-  background: sage-color(grey, 200);
+  background: sage-color(grey, 150);
   border-radius: sage-border(radius);
 
   [class*="sage-col--align-"] & {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
index c247ac9c06..34719f30ce 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_rouge_theme.scss
@@ -1,5 +1,5 @@
 // background
-$-color-1: sage-color(grey, 200);
+$-color-1: sage-color(grey, 150);
 // Whitespace
 $-color-24: sage-color(grey, 700);
 // Name entity
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
index 37bf5a3dbf..089897f560 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_specs.scss
@@ -8,14 +8,14 @@
   th {
     padding: 4px;
     color: sage-color(grey, 700);
-    border-bottom: 1px solid sage-color(grey, 300);
+    border-bottom: 1px solid sage-color(grey, 200);
   }
 
   td {
     padding: 4px;
     font-size: sage-font-size(body-xs);
     vertical-align: middle;
-    border-bottom: 1px solid sage-color(grey, 200);
+    border-bottom: 1px solid sage-color(grey, 150);
   }
 
   tfoot td {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss
index b0aa73ae62..86c16f80d4 100644
--- a/docs/lib/sage-frontend/stylesheets/docs/_text.scss
+++ b/docs/lib/sage-frontend/stylesheets/docs/_text.scss
@@ -8,7 +8,7 @@ code {
   display: inline-block;
   padding: 0 sage-spacing(2xs);
   font-size: 0.9em;
-  background-color: sage-color(grey, 200);
+  background-color: sage-color(grey, 150);
 }
 
 pre {
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index ecda0a1c0f..ece753f44c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -9,8 +9,8 @@
 // `_button.scss`, `sage_alert.rb`, `_sage_alert.html.erb`, and `Alert.jsx`
 //
 $-alert-background-colors: (
-  default: sage-color(grey, 200),
-  draft: sage-color(grey, 200),
+  default: sage-color(grey, 150),
+  draft: sage-color(grey, 150),
   info: sage-color(primary, 100),
   published: sage-color(sage, 100),
   success: sage-color(sage, 100),
diff --git a/packages/sage-assets/lib/stylesheets/components/_assistant.scss b/packages/sage-assets/lib/stylesheets/components/_assistant.scss
index a7f34a78b4..8085e7631c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_assistant.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_assistant.scss
@@ -8,9 +8,9 @@
 $-assistant-height: $sage-assistant-height;
 $-assistant-branding-height: rem(20px);
 $-assistant-search-height: rem(40px);
-$-assistant-search-bg-color: sage-color(grey, 200);
+$-assistant-search-bg-color: sage-color(grey, 150);
 $-assistant-search-bg-opacity: 0.1;
-$-assistant-search-placeholder-color: sage-color(grey, 300);
+$-assistant-search-placeholder-color: sage-color(grey, 200);
 $-assistant-search-placeholder-transition: color 0.15s ease-in-out, opacity 0.15s ease-in-out;
 
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_avatar.scss b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
index a8dc43bf7e..c11dc7e352 100644
--- a/packages/sage-assets/lib/stylesheets/components/_avatar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_avatar.scss
@@ -10,11 +10,11 @@ $-avatar-max-size: rem(128px);
 $-avatar-ring-colors: (
   charcoal: (
     main: sage-color(grey, 950),
-    bg: sage-color(grey, 200)
+    bg: sage-color(grey, 150)
   ),
   grey: (
     main: sage-color(grey, 950),
-    bg: sage-color(grey, 200)
+    bg: sage-color(grey, 150)
   ),
   purple: (
     main: sage-color(purple, 600),
diff --git a/packages/sage-assets/lib/stylesheets/components/_banner.scss b/packages/sage-assets/lib/stylesheets/components/_banner.scss
index bc052abb89..921b11abc9 100644
--- a/packages/sage-assets/lib/stylesheets/components/_banner.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_banner.scss
@@ -14,7 +14,7 @@ $-banner-colors: (
     icon: "flag",
   ),
   secondary: (
-    background: sage-color(grey, 200),
+    background: sage-color(grey, 150),
     text: sage-color(grey, 950),
     text-hover: sage-color(grey, 800),
     icon: "info-circle",
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 686cd50027..c8763f9e6d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -64,8 +64,8 @@ $-btn-base-styles: (
     ),
     disabled: (
       color: sage-color(grey, 600),
-      background-color: sage-color(grey, 200),
-      border-color: sage-color(grey, 200),
+      background-color: sage-color(grey, 150),
+      border-color: sage-color(grey, 150),
     )
   ),
   secondary: (
@@ -149,8 +149,8 @@ $-btn-subtle-styles: (
 // NOTE: the following colors should be kept in sync
 // with the colors in `_alert.scss`
 $-alert-close-btn-background-colors: (
-  default: sage-color(grey, 300),
-  draft: sage-color(grey, 300),
+  default: sage-color(grey, 200),
+  draft: sage-color(grey, 200),
   info: sage-color(primary, 200),
   published: sage-color(sage, 200),
   success: sage-color(sage, 200),
@@ -325,7 +325,7 @@ $-btn-loading-min-height: rem(36px);
     bottom: rem(1px);
     height: rem(38px);
     background-color: sage-color(white);
-    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300);
+    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 200);
     border-color: transparent;
 
     @include sage-focus-outline--update-color(transparent);
@@ -480,7 +480,7 @@ $-btn-loading-min-height: rem(36px);
     }
 
     &:hover {
-      background-color: sage-color(grey, 200);
+      background-color: sage-color(grey, 150);
     }
 
     &.sage-btn--selected {
@@ -616,7 +616,7 @@ a.sage-btn {
   &[aria-disabled="true"] {
     color: sage-color(grey, 600);
     background-color: sage-color(white);
-    border-color: sage-color(grey, 200);
+    border-color: sage-color(grey, 150);
   }
 }
 
@@ -864,5 +864,5 @@ a.sage-btn {
 
 .sage-btn-group--border-top {
   padding-top: sage-spacing(lg);
-  border-top: 1px solid sage-color(grey, 300);
+  border-top: 1px solid sage-color(grey, 200);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index 60ffb9bd64..20da94a417 100644
--- a/packages/sage-assets/lib/stylesheets/components/_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_card.scss
@@ -26,7 +26,7 @@ $-sage-card-background: transparent;
   border-color: sage-color(white);
   @include sage-dashed-border(
     $border-radius: sage-border(radius),
-    $color: sage-color(grey, 300),
+    $color: sage-color(grey, 200),
   );
 }
 
@@ -103,7 +103,7 @@ $-sage-card-background: transparent;
     top: 50%;
     width: 100%;
     height: 1px;
-    background: sage-color(grey, 200);
+    background: sage-color(grey, 150);
   }
   &::after {
     content: attr(data-divider-label);
diff --git a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
index 405c7f8835..af07f3ddef 100644
--- a/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_catalog_item.scss
@@ -94,7 +94,7 @@ $-catalogue-item-image-height-mobile: rem(120px);
   grid-area: img;
   overflow: hidden;
   min-height: $-catalogue-item-image-height-min;
-  background: sage-color(grey, 200);
+  background: sage-color(grey, 150);
   border-radius: sage-border(radius);
   border: sage-border();
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
index 9f52031996..5fa75c302a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -8,11 +8,11 @@
 // Colors
 //
 $-checkbox-color-default: sage-color(grey, 500);
-$-checkbox-color-default-border: sage-color(grey, 300);
+$-checkbox-color-default-border: sage-color(grey, 200);
 $-checkbox-color-checked: sage-color(grey, 900);
 $-checkbox-color-checked-hover: sage-color(grey, 950);
 $-checkbox-color-disabled: sage-color(grey, 150);
-$-checkbox-color-disabled-border: sage-color(grey, 200);
+$-checkbox-color-disabled-border: sage-color(grey, 150);
 $-checkbox-color-disabled-checked: sage-color(grey, 600);
 $-checkbox-color-error: sage-color(red, 500);
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index 926c1c585f..67083f422e 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -86,7 +86,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     pointer-events: none;
 
     &::before {
-      background-color: sage-color(grey, 200);
+      background-color: sage-color(grey, 150);
     }
 
     &:hover::before {
diff --git a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
index 1a2f5c46a0..1d66e8e520 100644
--- a/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_copy_text.scss
@@ -5,7 +5,7 @@
 ////
 
 
-$-copy-text-border: 1px solid sage-color(grey, 300);
+$-copy-text-border: 1px solid sage-color(grey, 200);
 $-copy-text-border-focus-color: sage-color(primary, 200);
 $-copy-text-border-hover-color: sage-color(grey, 500);
 $-copy-text-color: sage-color(grey, 900);
diff --git a/packages/sage-assets/lib/stylesheets/components/_data_card.scss b/packages/sage-assets/lib/stylesheets/components/_data_card.scss
index 718233514a..379d1f6ede 100644
--- a/packages/sage-assets/lib/stylesheets/components/_data_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_data_card.scss
@@ -7,7 +7,7 @@
 
 $-data-card-colors: (
   default: (
-    border-color: sage-color(grey, 300),
+    border-color: sage-color(grey, 200),
     text-color: sage-color(grey, 900),
   ),
   danger: (
@@ -121,7 +121,7 @@ $-data-card-padding: sage-spacing(xs);
 
   .sage-data-card-scroll-container &:not(:last-child) {
     padding-right: sage-spacing(md);
-    border-right: 1px solid sage-color(grey, 300);
+    border-right: 1px solid sage-color(grey, 200);
   }
 
   .sage-data-card-scroll-container &:not(:first-child) {
diff --git a/packages/sage-assets/lib/stylesheets/components/_divider.scss b/packages/sage-assets/lib/stylesheets/components/_divider.scss
index 4b53ae54df..54e6b35fb2 100644
--- a/packages/sage-assets/lib/stylesheets/components/_divider.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_divider.scss
@@ -9,7 +9,7 @@
   height: rem(1px);
   width: 100%;
   margin: 0;
-  background: var(--sage-divider-background-color, sage-color(grey, 200));
+  background: var(--sage-divider-background-color, sage-color(grey, 150));
   border: 0;
 
   &--vertical {
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index 1b5e2d3abc..126fc0fbb1 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -133,13 +133,13 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__item--border-before {
   padding-top: sage-spacing(xs);
   margin-top: sage-spacing(xs);
-  border-top: 1px solid sage-color(grey, 200);
+  border-top: 1px solid sage-color(grey, 150);
 }
 
 .sage-dropdown__item--border-after {
   padding-bottom: sage-spacing(xs);
   margin-bottom: sage-spacing(xs);
-  border-bottom: 1px solid sage-color(grey, 200);
+  border-bottom: 1px solid sage-color(grey, 150);
 }
 
 .sage-dropdown__item--disabled {
@@ -187,7 +187,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 
   &:hover {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
   }
 
   &:focus-within {
@@ -252,7 +252,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   &:hover {
     color: sage-color(grey, 900);
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
index 754f3ac421..d34fcf5ae7 100644
--- a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
@@ -6,7 +6,7 @@
 
 
 $-expandable-card-bg-color: sage-color(white);
-$-expandable-card-border-color: sage-color(grey, 300);
+$-expandable-card-border-color: sage-color(grey, 200);
 $-expandable-card-border-radius: sage-border(radius);
 $-expandable-card-padding: sage-spacing(sm);
 $-expandable-card-padding-xs: sage-spacing(xs);
diff --git a/packages/sage-assets/lib/stylesheets/components/_hint.scss b/packages/sage-assets/lib/stylesheets/components/_hint.scss
index 59b8475393..ed0d1b0bc4 100644
--- a/packages/sage-assets/lib/stylesheets/components/_hint.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_hint.scss
@@ -6,7 +6,7 @@
 
 // Colors
 $-hint-text-color: sage-color(grey, 900);
-$-hint-background-color: sage-color(grey, 200);
+$-hint-background-color: sage-color(grey, 150);
 
 .sage-hint {
   display: flex;
diff --git a/packages/sage-assets/lib/stylesheets/components/_indicator.scss b/packages/sage-assets/lib/stylesheets/components/_indicator.scss
index b2dbc95076..d26ebacc14 100644
--- a/packages/sage-assets/lib/stylesheets/components/_indicator.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_indicator.scss
@@ -20,7 +20,7 @@ $-indicator-size: rem(6px);
   border-radius: sage-border(radius-round);
 
   &:not(.sage-indicator--current) {
-    background-color: sage-color(grey, 300);
+    background-color: sage-color(grey, 200);
   }
 
   &:not(:last-child) {
diff --git a/packages/sage-assets/lib/stylesheets/components/_input_group.scss b/packages/sage-assets/lib/stylesheets/components/_input_group.scss
index 80098d068b..112ec78b3d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_input_group.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_input_group.scss
@@ -26,7 +26,7 @@ $-input-group-pw-field-button-color-text-hover: sage-color(black);
   }
 
   .sage-input-group:focus-within & {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
     opacity: 1;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss
index 372b4ea5c7..557e109ae1 100644
--- a/packages/sage-assets/lib/stylesheets/components/_meter.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_meter.scss
@@ -6,7 +6,7 @@
 
 
 $-meter-bar-height: rem(4px);
-$-meter-color-bg: sage-color(grey, 200);
+$-meter-color-bg: sage-color(grey, 150);
 $-meter-bar-low: rgba(sage-color(red, 950), 0.9);
 $-meter-bar-med: rgba(sage-color(orange), 0.9);
 $-meter-bar-success: rgba(sage-color(sage, 200), 0.9);
diff --git a/packages/sage-assets/lib/stylesheets/components/_nav.scss b/packages/sage-assets/lib/stylesheets/components/_nav.scss
index f727cefe64..1953cc5b64 100644
--- a/packages/sage-assets/lib/stylesheets/components/_nav.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_nav.scss
@@ -6,8 +6,8 @@
 
 $-nav-color-text: sage-color(grey, 800);
 $-nav-color-focus: sage-color(grey, 500);
-$-nav-color-background: sage-color(grey, 200);
-$-nav-color-background-hover: sage-color(grey, 200);
+$-nav-color-background: sage-color(grey, 150);
+$-nav-color-background-hover: sage-color(grey, 150);
 $-nav-icon-size: rem(16px);
 $-nav-icon-spacing: rem(8px);
 $-nav-subitem-border-width: rem(2px);
@@ -117,5 +117,5 @@ $-nav-subitem-border-width: rem(2px);
 .sage-nav__list--sub-with-icon {
   margin-left: calc((#{sage-spacing(sm)} + (#{$-nav-icon-size} / 2)) - (#{$-nav-subitem-border-width} / 2) - (#{$-nav-icon-spacing} / 2));
   padding-left: sage-spacing(sm);
-  border-left: $-nav-subitem-border-width solid sage-color(grey, 300);
+  border-left: $-nav-subitem-border-width solid sage-color(grey, 200);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
index 2042aa956c..5b768efd2a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
@@ -84,7 +84,7 @@ $-page-heading-image-height-mobile: rem(120px);
   grid-area: image;
   overflow: hidden;
   min-height: $-page-heading-image-height-min;
-  background: sage-color(grey, 300);
+  background: sage-color(grey, 200);
   border-radius: sage-border(radius);
   border: sage-border();
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_pagination.scss b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
index 57da7e61ef..53f4b93eca 100644
--- a/packages/sage-assets/lib/stylesheets/components/_pagination.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_pagination.scss
@@ -11,7 +11,7 @@ $-pagination-radius: sage-border(radius-round);
 $-pagination-text-color: sage-color(grey, 900);
 $-pagination-text-color-disabled: sage-color(grey, 600);
 $-pagination-bg-color-current: sage-color(grey, 150);
-$-pagination-bg-color-hover: sage-color(grey, 200);
+$-pagination-bg-color-hover: sage-color(grey, 150);
 $-pagination-focus-ring-color: sage-color(primary, 200);
 
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel.scss b/packages/sage-assets/lib/stylesheets/components/_panel.scss
index 4bfee719b2..72be2f8200 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel.scss
@@ -45,7 +45,7 @@
     top: 50%;
     width: 100%;
     height: 1px;
-    background: sage-color(grey, 200);
+    background: sage-color(grey, 150);
   }
 
   &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
index d4cf57bf16..29ccbd6243 100644
--- a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
@@ -19,7 +19,7 @@
     height: 0;
     margin-right: -1 * sage-spacing(panel);
     margin-left: -1 * sage-spacing(panel);
-    border-top: 1px solid sage-color(grey, 300);
+    border-top: 1px solid sage-color(grey, 200);
   }
 
   .sage-search {
diff --git a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
index 4f7b972164..7275e3c395 100644
--- a/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_progress_bar.scss
@@ -34,7 +34,7 @@ $-progress-bar-height: sage-spacing(xs);
   height: $-progress-bar-height;
   width: 100%;
   border-radius: sage-border(radius-small);
-  background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200));
+  background-color: var(--sage-progress-bar-background-color, sage-color(grey, 150));
 
   .sage-modal__header & {
     border-radius: 0;
diff --git a/packages/sage-assets/lib/stylesheets/components/_search.scss b/packages/sage-assets/lib/stylesheets/components/_search.scss
index 25da94d61e..2786271cde 100644
--- a/packages/sage-assets/lib/stylesheets/components/_search.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_search.scss
@@ -29,7 +29,7 @@ $-search-icon: "::before";
   }
 
   .sage-search:not(.sage-search--contained) & {
-    border-bottom: 1px solid sage-color(grey, 300);
+    border-bottom: 1px solid sage-color(grey, 200);
 
     &:hover {
       background-color: sage-color(grey, 100);
diff --git a/packages/sage-assets/lib/stylesheets/components/_sortable.scss b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
index d8526e12af..9dd32db233 100644
--- a/packages/sage-assets/lib/stylesheets/components/_sortable.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_sortable.scss
@@ -75,7 +75,7 @@ $-sortable-image-height: rem(48px);
   }
 
   &.sage-sortable__item--ghost {
-    background: sage-color(grey, 200);
+    background: sage-color(grey, 150);
   }
 }
 
@@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px);
   overflow: hidden;
   height: $-sortable-image-height;
   width: $-sortable-image-width;
-  background: sage-color(grey, 200);
+  background: sage-color(grey, 150);
   border-radius: sage-border(radius);
   border: sage-border();
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
index 0a0517a861..84ce30406a 100644
--- a/packages/sage-assets/lib/stylesheets/components/_switch.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -6,14 +6,14 @@
 
 
 // Colors
-$-switch-color-default: sage-color(grey, 300);
+$-switch-color-default: sage-color(grey, 200);
 $-switch-color-default-hover: sage-color(grey, 500);
 $-switch-color-default-text: sage-color(grey, 800);
 $-switch-color-checked: sage-color(grey, 900);
 $-switch-color-checked-hover: sage-color(grey, 950);
-$-switch-color-disabled: sage-color(grey, 200);
+$-switch-color-disabled: sage-color(grey, 150);
 $-switch-color-disabled-text: sage-color(grey, 800);
-$-switch-color-disabled-checked: sage-color(grey, 200);
+$-switch-color-disabled-checked: sage-color(grey, 150);
 $-switch-color-disabled-checked-text: sage-color(grey, 600);
 $-switch-color-error: sage-color(red, 500);
 $-switch-focus-outline-error-color: sage-color(red, 300);
diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss
index e6aaec9a81..7bd59d968b 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tab.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss
@@ -28,7 +28,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
 
   .sage-tabs--filter & {
     padding: rem(6px) rem(14px);
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 150);
     border-radius: sage-border(radius-x-large);
     @extend %t-sage-body-small-semi;
   }
@@ -38,7 +38,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
   &:hover {
     color: $-tab-color-active;
     .sage-tabs--filter & {
-      background: sage-color(grey, 300);
+      background: sage-color(grey, 200);
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss
index f7890436d7..6183567ffe 100644
--- a/packages/sage-assets/lib/stylesheets/components/_table.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_table.scss
@@ -5,7 +5,7 @@
 ////
 
 // Borders and sizing
-$-table-header-border: rem(1px) solid sage-color(grey, 200);
+$-table-header-border: rem(1px) solid sage-color(grey, 150);
 $-table-cell-padding-xs: sage-spacing(xs);
 $-table-cell-padding-card: sage-spacing();
 $-table-cell-padding-panel: sage-spacing();
diff --git a/packages/sage-assets/lib/stylesheets/components/_tabs.scss b/packages/sage-assets/lib/stylesheets/components/_tabs.scss
index 2b250ce8a1..5f3915c136 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tabs.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tabs.scss
@@ -38,7 +38,7 @@
   padding-top: sage-spacing(sm);
   padding-left: sage-spacing(xs);
   padding-right: sage-spacing(xs);
-  background-color: sage-color(grey, 200);
+  background-color: sage-color(grey, 150);
 }
 
 .sage-tabs--layout-stacked {
@@ -52,7 +52,7 @@
 .sage-tabs-divider,
 .sage-tabs-container > hr {
   margin: 0;
-  border-top: 1px solid sage-color(grey, 300);
+  border-top: 1px solid sage-color(grey, 200);
 }
 
 .sage-tabs-pane {
diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss
index 7885d8ac01..37bda531af 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tag.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss
@@ -15,11 +15,11 @@ $-tag-button-icon-mobile-size: rem(24px);
   display: inline-flex;
   align-items: center;
   padding: sage-spacing(3xs) sage-spacing(xs) sage-spacing(3xs) sage-spacing(xs);
-  background-color: sage-color(grey, 200);
+  background-color: sage-color(grey, 150);
   border-radius: sage-border(radius-x-large);
 
   &:hover {
-    background-color: sage-color(grey, 300);
+    background-color: sage-color(grey, 200);
   }
 
   pds-icon {
diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss
index 9e8aaed40a..80dedca577 100644
--- a/packages/sage-assets/lib/stylesheets/core/_variables.scss
+++ b/packages/sage-assets/lib/stylesheets/core/_variables.scss
@@ -51,7 +51,7 @@ $sage-field-configs: (
 /// Field coloring
 ///
 $sage-field-colors: (
-  border: sage-color(grey, 300),
+  border: sage-color(grey, 200),
   default: sage-color(grey, 800),
   disabled: sage-color(grey, 500),
   disabled-background: sage-color(grey, 150),
@@ -67,10 +67,10 @@ $sage-field-colors: (
 ///
 $sage-radio-colors: (
   checked: sage-color(grey, 900),
-  checked-disabled: sage-color(grey, 200),
+  checked-disabled: sage-color(grey, 150),
   checked-hover: sage-color(grey, 950),
   checked-inner: sage-color(white),
-  default: sage-color(grey, 300),
+  default: sage-color(grey, 200),
   disabled: sage-color(grey, 150),
   error: sage-color(red, 500),
   hover: sage-color(grey, 500),
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border.scss b/packages/sage-assets/lib/stylesheets/tokens/_border.scss
index 401a0ef3c7..452bf3e2c1 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_border.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_border.scss
@@ -9,9 +9,9 @@
 /// Sage borders token
 ///
 $sage-borders: (
-  default: rem(1px) solid sage-color(grey, 200),
+  default: rem(1px) solid sage-color(grey, 150),
   error: rem(1px) solid sage-color(red, 500),
-  interactive: rem(1px) solid sage-color(grey, 300),
+  interactive: rem(1px) solid sage-color(grey, 200),
   interactive-hover: rem(1px) solid sage-color(grey, 500),
   radius-small: rem(4px),
   radius: rem(8px),
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
index 69c8e04c99..c8c1976bc1 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_border_interactive.scss
@@ -9,13 +9,13 @@
 /// Sage borders interactive token
 ///
 $sage-borders-interactive: (
-  default: 0 0 0 1px sage-color(grey, 300),
+  default: 0 0 0 1px sage-color(grey, 200),
   hover: 0 0 0 1px sage-color(grey, 500),
   focus: 0 0 0 4px sage-color(primary, 200),
   selected: 0 0 0 4px sage-color(grey, 900),
   error: 0 0 0 1px sage-color(red, 500),
   error-focus: 0 0 0 4px sage-color(red, 500),
-  disabled: 0 0 0 1px sage-color(grey, 200),
+  disabled: 0 0 0 1px sage-color(grey, 150),
 );
 
 ///
diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx
index 58636fe14a..d02ce2a18a 100644
--- a/packages/sage-react/lib/Divider/Divider.jsx
+++ b/packages/sage-react/lib/Divider/Divider.jsx
@@ -29,7 +29,7 @@ export const Divider = ({
 };
 
 Divider.defaultProps = {
-  color: SageTokens.COLOR_PALETTE.GREY_300,
+  color: SageTokens.COLOR_PALETTE.GREY_200,
   vertical: null,
   offset: null,
 };