From bee88fdf92b9d2befa5636590c57eb6d397db3b7 Mon Sep 17 00:00:00 2001
From: Quinton Jason <quinton.jason@gmail.com>
Date: Wed, 28 Aug 2024 10:35:04 -0500
Subject: [PATCH] Revert "fix: update grey color token to lower greys"

This reverts commit 2f43f1d435529ff04f4daf89fc0bc7cda3ff9ab9.
---
 .../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 bdd18a82ce..64472af66b 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, 150);
+  background: sage-color(grey, 200);
   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 34719f30ce..c247ac9c06 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, 150);
+$-color-1: sage-color(grey, 200);
 // 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 089897f560..37bf5a3dbf 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, 200);
+    border-bottom: 1px solid sage-color(grey, 300);
   }
 
   td {
     padding: 4px;
     font-size: sage-font-size(body-xs);
     vertical-align: middle;
-    border-bottom: 1px solid sage-color(grey, 150);
+    border-bottom: 1px solid sage-color(grey, 200);
   }
 
   tfoot td {
diff --git a/docs/lib/sage-frontend/stylesheets/docs/_text.scss b/docs/lib/sage-frontend/stylesheets/docs/_text.scss
index 86c16f80d4..b0aa73ae62 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, 150);
+  background-color: sage-color(grey, 200);
 }
 
 pre {
diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index ece753f44c..ecda0a1c0f 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, 150),
-  draft: sage-color(grey, 150),
+  default: sage-color(grey, 200),
+  draft: sage-color(grey, 200),
   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 8085e7631c..a7f34a78b4 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, 150);
+$-assistant-search-bg-color: sage-color(grey, 200);
 $-assistant-search-bg-opacity: 0.1;
-$-assistant-search-placeholder-color: sage-color(grey, 200);
+$-assistant-search-placeholder-color: sage-color(grey, 300);
 $-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 c11dc7e352..a8dc43bf7e 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, 150)
+    bg: sage-color(grey, 200)
   ),
   grey: (
     main: sage-color(grey, 950),
-    bg: sage-color(grey, 150)
+    bg: sage-color(grey, 200)
   ),
   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 921b11abc9..bc052abb89 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, 150),
+    background: sage-color(grey, 200),
     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 c8763f9e6d..686cd50027 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, 150),
-      border-color: sage-color(grey, 150),
+      background-color: sage-color(grey, 200),
+      border-color: sage-color(grey, 200),
     )
   ),
   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, 200),
-  draft: sage-color(grey, 200),
+  default: sage-color(grey, 300),
+  draft: sage-color(grey, 300),
   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, 200);
+    box-shadow: rem(-1px) 0 0 0 sage-color(grey, 300);
     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, 150);
+      background-color: sage-color(grey, 200);
     }
 
     &.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, 150);
+    border-color: sage-color(grey, 200);
   }
 }
 
@@ -864,5 +864,5 @@ a.sage-btn {
 
 .sage-btn-group--border-top {
   padding-top: sage-spacing(lg);
-  border-top: 1px solid sage-color(grey, 200);
+  border-top: 1px solid sage-color(grey, 300);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_card.scss b/packages/sage-assets/lib/stylesheets/components/_card.scss
index 20da94a417..60ffb9bd64 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, 200),
+    $color: sage-color(grey, 300),
   );
 }
 
@@ -103,7 +103,7 @@ $-sage-card-background: transparent;
     top: 50%;
     width: 100%;
     height: 1px;
-    background: sage-color(grey, 150);
+    background: sage-color(grey, 200);
   }
   &::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 af07f3ddef..405c7f8835 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, 150);
+  background: sage-color(grey, 200);
   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 5fa75c302a..9f52031996 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, 200);
+$-checkbox-color-default-border: sage-color(grey, 300);
 $-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, 150);
+$-checkbox-color-disabled-border: sage-color(grey, 200);
 $-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 67083f422e..926c1c585f 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, 150);
+      background-color: sage-color(grey, 200);
     }
 
     &: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 1d66e8e520..1a2f5c46a0 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, 200);
+$-copy-text-border: 1px solid sage-color(grey, 300);
 $-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 379d1f6ede..718233514a 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, 200),
+    border-color: sage-color(grey, 300),
     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, 200);
+    border-right: 1px solid sage-color(grey, 300);
   }
 
   .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 54e6b35fb2..4b53ae54df 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, 150));
+  background: var(--sage-divider-background-color, sage-color(grey, 200));
   border: 0;
 
   &--vertical {
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index 126fc0fbb1..1b5e2d3abc 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, 150);
+  border-top: 1px solid sage-color(grey, 200);
 }
 
 .sage-dropdown__item--border-after {
   padding-bottom: sage-spacing(xs);
   margin-bottom: sage-spacing(xs);
-  border-bottom: 1px solid sage-color(grey, 150);
+  border-bottom: 1px solid sage-color(grey, 200);
 }
 
 .sage-dropdown__item--disabled {
@@ -187,7 +187,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
 
   &:hover {
-    background-color: sage-color(grey, 150);
+    background-color: sage-color(grey, 200);
   }
 
   &: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, 150);
+    background-color: sage-color(grey, 200);
   }
 }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss b/packages/sage-assets/lib/stylesheets/components/_expandable_card.scss
index d34fcf5ae7..754f3ac421 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, 200);
+$-expandable-card-border-color: sage-color(grey, 300);
 $-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 ed0d1b0bc4..59b8475393 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, 150);
+$-hint-background-color: sage-color(grey, 200);
 
 .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 d26ebacc14..b2dbc95076 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, 200);
+    background-color: sage-color(grey, 300);
   }
 
   &: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 112ec78b3d..80098d068b 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, 150);
+    background-color: sage-color(grey, 200);
     opacity: 1;
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_meter.scss b/packages/sage-assets/lib/stylesheets/components/_meter.scss
index 557e109ae1..372b4ea5c7 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, 150);
+$-meter-color-bg: sage-color(grey, 200);
 $-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 1953cc5b64..f727cefe64 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, 150);
-$-nav-color-background-hover: sage-color(grey, 150);
+$-nav-color-background: sage-color(grey, 200);
+$-nav-color-background-hover: sage-color(grey, 200);
 $-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, 200);
+  border-left: $-nav-subitem-border-width solid sage-color(grey, 300);
 }
diff --git a/packages/sage-assets/lib/stylesheets/components/_page_heading.scss b/packages/sage-assets/lib/stylesheets/components/_page_heading.scss
index 5b768efd2a..2042aa956c 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, 200);
+  background: sage-color(grey, 300);
   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 53f4b93eca..57da7e61ef 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, 150);
+$-pagination-bg-color-hover: sage-color(grey, 200);
 $-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 72be2f8200..4bfee719b2 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, 150);
+    background: sage-color(grey, 200);
   }
 
   &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss b/packages/sage-assets/lib/stylesheets/components/_panel_controls.scss
index 29ccbd6243..d4cf57bf16 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, 200);
+    border-top: 1px solid sage-color(grey, 300);
   }
 
   .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 7275e3c395..4f7b972164 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, 150));
+  background-color: var(--sage-progress-bar-background-color, sage-color(grey, 200));
 
   .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 2786271cde..25da94d61e 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, 200);
+    border-bottom: 1px solid sage-color(grey, 300);
 
     &: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 9dd32db233..d8526e12af 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, 150);
+    background: sage-color(grey, 200);
   }
 }
 
@@ -84,7 +84,7 @@ $-sortable-image-height: rem(48px);
   overflow: hidden;
   height: $-sortable-image-height;
   width: $-sortable-image-width;
-  background: sage-color(grey, 150);
+  background: sage-color(grey, 200);
   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 84ce30406a..0a0517a861 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, 200);
+$-switch-color-default: sage-color(grey, 300);
 $-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, 150);
+$-switch-color-disabled: sage-color(grey, 200);
 $-switch-color-disabled-text: sage-color(grey, 800);
-$-switch-color-disabled-checked: sage-color(grey, 150);
+$-switch-color-disabled-checked: sage-color(grey, 200);
 $-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 7bd59d968b..e6aaec9a81 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, 150);
+    background-color: sage-color(grey, 200);
     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, 200);
+      background: sage-color(grey, 300);
     }
   }
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_table.scss b/packages/sage-assets/lib/stylesheets/components/_table.scss
index 6183567ffe..f7890436d7 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, 150);
+$-table-header-border: rem(1px) solid sage-color(grey, 200);
 $-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 5f3915c136..2b250ce8a1 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, 150);
+  background-color: sage-color(grey, 200);
 }
 
 .sage-tabs--layout-stacked {
@@ -52,7 +52,7 @@
 .sage-tabs-divider,
 .sage-tabs-container > hr {
   margin: 0;
-  border-top: 1px solid sage-color(grey, 200);
+  border-top: 1px solid sage-color(grey, 300);
 }
 
 .sage-tabs-pane {
diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss
index 37bda531af..7885d8ac01 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, 150);
+  background-color: sage-color(grey, 200);
   border-radius: sage-border(radius-x-large);
 
   &:hover {
-    background-color: sage-color(grey, 200);
+    background-color: sage-color(grey, 300);
   }
 
   pds-icon {
diff --git a/packages/sage-assets/lib/stylesheets/core/_variables.scss b/packages/sage-assets/lib/stylesheets/core/_variables.scss
index 80dedca577..9e8aaed40a 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, 200),
+  border: sage-color(grey, 300),
   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, 150),
+  checked-disabled: sage-color(grey, 200),
   checked-hover: sage-color(grey, 950),
   checked-inner: sage-color(white),
-  default: sage-color(grey, 200),
+  default: sage-color(grey, 300),
   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 452bf3e2c1..401a0ef3c7 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, 150),
+  default: rem(1px) solid sage-color(grey, 200),
   error: rem(1px) solid sage-color(red, 500),
-  interactive: rem(1px) solid sage-color(grey, 200),
+  interactive: rem(1px) solid sage-color(grey, 300),
   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 c8c1976bc1..69c8e04c99 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, 200),
+  default: 0 0 0 1px sage-color(grey, 300),
   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, 150),
+  disabled: 0 0 0 1px sage-color(grey, 200),
 );
 
 ///
diff --git a/packages/sage-react/lib/Divider/Divider.jsx b/packages/sage-react/lib/Divider/Divider.jsx
index d02ce2a18a..58636fe14a 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_200,
+  color: SageTokens.COLOR_PALETTE.GREY_300,
   vertical: null,
   offset: null,
 };