diff --git a/core/themes/claro/css/base/elements.css b/core/themes/claro/css/base/elements.css
index e1ecf0e103f5..1b995d7fed94 100644
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -18,7 +18,7 @@ html {
 }
 
 body {
-  color: #222330;
+  color: #232429;
   background: #fff;
 }
 
diff --git a/core/themes/claro/css/base/variables.css b/core/themes/claro/css/base/variables.css
index 0e1d9efb9a68..e6ff4efbd857 100644
--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -9,7 +9,8 @@
    * Color Palette.
    */
   /* Secondary. */
-  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+  /* Variations. */ /* 10% darker than base. */ /* 20% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
+  /* Gray variations. */
   /*
    * Base.
    */
diff --git a/core/themes/claro/css/base/variables.pcss.css b/core/themes/claro/css/base/variables.pcss.css
index 4e9f92785795..62163019d4d4 100644
--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -4,26 +4,17 @@
    */
   --color-absolutezero: #003cc5;
   --color-white: #fff;
-  --color-text: #222330;
-  --color-text-light: var(--color-grayblue);
-  --color-whitesmoke: #f3f4f9;
-  --color-whitesmoke-light: #fafbfd;
-  --color-whitesmoke-o-40: rgba(243, 244, 249, 0.4);
+  --color-text: var(--color-gray);
+  --color-text-light: var(--color-gray-500);
+  --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
   /* Secondary. */
-  --color-lightdiamond: #dedfe4;
-  --color-lightgray: #d4d4d8;
-  --color-lightgray-o-80: rgba(212, 212, 218, 0.8);
-  --color-grayblue: #8e929c;
-  --color-oldsilver: #82828c;
-  --color-davysgray: #545560;
+  --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
   --color-maximumred: #d72222;
   --color-sunglow: #ffd23f;
   --color-sunglow-shaded: #977405;
   --color-lightninggreen: #26a769;
   --color-focus: var(--color-lightninggreen);
   /* Variations. */
-  --color-lightgray-hover: #c2c3ca; /* 5% darker than base. */
-  --color-lightgray-active: #adaeb3; /* 10% darker than base. */
   --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
   --color-absolutezero-active: #00339a; /* 20% darker than base. */
   --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
@@ -32,6 +23,19 @@
   --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
   --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
   --color-bgred-active: #fceded; /* 10% darker than base. */
+  /* Gray variations. */
+  --color-gray: #232429;
+  --color-gray-900: #393a3f;
+  --color-gray-800: #55565b;
+  --color-gray-700: #75767b;
+  --color-gray-600: #828388;
+  --color-gray-500: #919297;
+  --color-gray-400: #adaeb3;
+  --color-gray-300: #c1c2c7;
+  --color-gray-200: #d3d4d9;
+  --color-gray-100: #dedfe4;
+  --color-gray-050: #f3f4f9;
+  --color-gray-025: #f9faff;
   /*
    * Base.
    */
@@ -88,16 +92,16 @@
    */
   --input-fg-color: var(--color-fg);
   --input-bg-color: var(--color-bg);
-  --input-fg-color--description: var(--color-davysgray);
-  --input-fg-color--placeholder: var(--color-grayblue);
-  --input-border-color: var(--color-grayblue);
+  --input-fg-color--description: var(--color-gray-800);
+  --input-fg-color--placeholder: var(--color-gray-500);
+  --input-border-color: var(--color-gray-500);
   --input--hover-border-color: var(--color-text);
   --input--focus-border-color: var(--color-absolutezero);
   --input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */
   --input--error-color: var(--color-maximumred);
   --input--error-border-color: var(--color-maximumred);
   --input--disabled-color: rgba(84, 85, 96, 0.6); /* Davy's gray with 0.6 opacity. */
-  --input--disabled-fg-color: var(--color-oldsilver);
+  --input--disabled-fg-color: var(--color-gray-600);
   --input--disabled-bg-color: #f2f2f3; /* Light gray with 0.3 opacity on white bg. */
   --input--disabled-border-color: #bababf; /* Old silver with 0.5 opacity on white bg. */
   --input--disabled-border-opacity: 0.5;
@@ -122,7 +126,7 @@
    * Details.
    */
   --details-bg-color: rgba(243, 244, 249, 0.4);
-  --details-border-color: var(--color-lightdiamond);
+  --details-border-color: var(--color-gray-100);
   --details-summary-shadow-color: var(--color-focus);
   --details-summary-focus-border-size: var(--focus-border-size);
   --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
@@ -141,18 +145,18 @@
   --button--focus-border-color: #5a8bed;
   --button-border-radius-size: var(--base-border-radius);
   --button-fg-color: var(--color-text);
-  --button-bg-color: var(--color-lightgray);
-  --button--hover-bg-color: var(--color-lightgray-hover);
-  --button--active-bg-color: var(--color-lightgray-active);
+  --button-bg-color: var(--color-gray-200);
+  --button--hover-bg-color: var(--color-gray-300);
+  --button--active-bg-color: var(--color-gray-400);
   --button--disabled-bg-color: #ebebed;
-  --button--disabled-fg-color: var(--color-grayblue);
+  --button--disabled-fg-color: var(--color-gray-500);
   --button-fg-color--primary: var(--color-white);
   --button-bg-color--primary: var(--color-absolutezero);
   --button--hover-bg-color--primary: var(--color-absolutezero-hover);
   --button--active-bg-color--primary: var(--color-absolutezero-active);
   --button--focus-bg-color--primary: var(--button-bg-color--primary);
-  --button--disabled-bg-color--primary: var(--color-lightgray);
-  --button--disabled-fg-color--primary: var(--color-oldsilver);
+  --button--disabled-bg-color--primary: var(--color-gray-200);
+  --button--disabled-fg-color--primary: var(--color-gray-600);
   --button-fg-color--danger: var(--color-white);
   --button-bg-color--danger: var(--color-maximumred);
   --button--hover-bg-color--danger: var(--color-maximumred-hover);
@@ -160,7 +164,7 @@
   /**
    * jQuery.UI dropdown.
    */
-  --jui-dropdown-fg-color: var(--color-davysgray);
+  --jui-dropdown-fg-color: var(--color-gray-800);
   --jui-dropdown-bg-color: var(--color-white);
   --jui-dropdown--active-fg-color: var(--color-white);
   --jui-dropdown--active-bg-color: var(--color-absolutezero);
@@ -191,10 +195,10 @@
   --progress-bar-spacing-size: var(--space-xs);
   --progress-bar-transition: width 0.5s ease-out;
   --progress-bar-label-color: var(--color-text);
-  --progress-bar-description-color: var(--color-davysgray);
+  --progress-bar-description-color: var(--color-gray-800);
   --progress-bar-description-font-size: var(--font-size-xs);
-  --progress-track-border-color: var(--color-grayblue);
-  --progress-track-bg-color: var(--color-lightgray);
+  --progress-track-border-color: var(--color-gray-500);
+  --progress-track-bg-color: var(--color-gray-200);
   /**
    * Tabledrag icon size.
    */
@@ -221,7 +225,7 @@
   --vertical-tabs-menu-item--right-margin: calc(var(--vertical-tabs-border-size) * -1);
   --vertical-tabs-menu-item--bottom-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
   --vertical-tabs-menu-item--left-margin: calc(var(--vertical-tabs-menu-item-shadow-extraspace) * -1);
-  --vertical-tabs-menu-separator-color: var(--color-lightgray);
+  --vertical-tabs-menu-separator-color: var(--color-gray-200);
   --vertical-tabs-menu-separator-size: 1px;
   --vertical-tabs-menu-width: 20em;
   --vertical-tabs-pane-width: calc(100% - var(--vertical-tabs-menu-width));
diff --git a/core/themes/claro/css/components/accordion.css b/core/themes/claro/css/components/accordion.css
index 8caaa5bc98d1..872e33888c65 100644
--- a/core/themes/claro/css/components/accordion.css
+++ b/core/themes/claro/css/components/accordion.css
@@ -11,7 +11,7 @@
  */
 
 .accordion {
-  color: #222330;
+  color: #232429;
   border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
@@ -41,6 +41,6 @@
 
 .accordion__item .claro-details__summary .summary {
   display: block;
-  color: #545560;
+  color: #55565b;
   font-weight: normal;
 }
diff --git a/core/themes/claro/css/components/accordion.pcss.css b/core/themes/claro/css/components/accordion.pcss.css
index 4195c1cbe940..d7fcaa657405 100644
--- a/core/themes/claro/css/components/accordion.pcss.css
+++ b/core/themes/claro/css/components/accordion.pcss.css
@@ -36,6 +36,6 @@
 
 .accordion__item .claro-details__summary .summary {
   display: block;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-weight: normal;
 }
diff --git a/core/themes/claro/css/components/action-link.css b/core/themes/claro/css/components/action-link.css
index adf2a4033ec9..0349f4627606 100644
--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -53,7 +53,7 @@
   padding: 0.75rem 1rem;
   cursor: pointer;
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   border-radius: 2px;
   background-color: #fff;
   font-size: 1rem;
diff --git a/core/themes/claro/css/components/action-link.pcss.css b/core/themes/claro/css/components/action-link.pcss.css
index 4fd41de11175..389b88befde3 100644
--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -44,7 +44,7 @@
   padding: calc(var(--space-m) - ((var(--space-l) - var(--space-m)) / 2)) var(--space-m);
   cursor: pointer;
   text-decoration: none;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   border-radius: var(--button-border-radius-size);
   background-color: var(--color-bg);
   font-size: var(--font-size-base);
diff --git a/core/themes/claro/css/components/breadcrumb.css b/core/themes/claro/css/components/breadcrumb.css
index f61429151394..b687386f1944 100644
--- a/core/themes/claro/css/components/breadcrumb.css
+++ b/core/themes/claro/css/components/breadcrumb.css
@@ -12,7 +12,7 @@
 
 .breadcrumb {
   padding: 0;
-  color: #222330;
+  color: #232429;
   font-size: 0.79rem;
 }
 
@@ -27,7 +27,7 @@
 .breadcrumb__link {
   display: inline;
   text-decoration: none;
-  color: #222330;
+  color: #232429;
   font-weight: bold;
 }
 
diff --git a/core/themes/claro/css/components/button.css b/core/themes/claro/css/components/button.css
index 197e2018403d..ac64cb4ec3c0 100644
--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -42,10 +42,10 @@
   cursor: pointer;
   text-align: center;
   text-decoration: none;
-  color: #222330;
+  color: #232429;
   border: 1px solid transparent !important;  /* 2 */
   border-radius: 2px;
-  background-color: #d4d4d8;
+  background-color: #d3d4d9;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1rem;
@@ -65,7 +65,7 @@
 
 .button:hover {
   text-decoration: none;
-  background-color: #c2c3ca;
+  background-color: #c1c2c7;
 }
 
 .button:focus {
@@ -120,7 +120,7 @@
 
 a.button:hover,
 a.button:active {
-  color: #222330;
+  color: #232429;
 }
 
 /* Primary button styles */
@@ -173,14 +173,14 @@ a.button--danger:active {
 
 .button:disabled,
 .button.is-disabled {
-  color: #8e929c;
+  color: #919297;
   background-color: #ebebed;
 }
 
 .button--primary:disabled,
 .button--primary.is-disabled {
-  color: #82828c;
-  background-color: #d4d4d8;
+  color: #828388;
+  background-color: #d3d4d9;
 }
 
 /* Make disabled <link> behave like a [disabled] <input> or <button> */
diff --git a/core/themes/claro/css/components/card.pcss.css b/core/themes/claro/css/components/card.pcss.css
index 6a3b286dacb3..bb5440d6f42e 100644
--- a/core/themes/claro/css/components/card.pcss.css
+++ b/core/themes/claro/css/components/card.pcss.css
@@ -8,7 +8,7 @@
 :root {
   --card-bg-color: var(--color-white);
   --card-border-size: 1px;
-  --card-border-color: var(--color-lightgray-o-80);
+  --card-border-color: var(--color-gray-200-o-80);
   --card-border-radius-size: var(--base-border-radius);
   --card-image-border-radius-size: calc(var(--card-border-radius-size) - var(--card-border-size));
   --card-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
diff --git a/core/themes/claro/css/components/content-header.pcss.css b/core/themes/claro/css/components/content-header.pcss.css
index f774132e993d..513f06faa12f 100644
--- a/core/themes/claro/css/components/content-header.pcss.css
+++ b/core/themes/claro/css/components/content-header.pcss.css
@@ -8,5 +8,5 @@
   overflow: hidden;
   margin-bottom: var(--space-s);
   padding: var(--space-l) 0 0;
-  background-color: var(--color-whitesmoke);
+  background-color: var(--color-gray-050);
 }
diff --git a/core/themes/claro/css/components/details.css b/core/themes/claro/css/components/details.css
index 26022ac6700a..cc0808bcd0b3 100644
--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -39,7 +39,7 @@
   display: block;
   margin-top: 1rem;
   margin-bottom: 1rem;
-  color: #222330;
+  color: #232429;
   border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
@@ -79,7 +79,7 @@
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-  color: #545560;
+  color: #55565b;
   border-radius: 1px;
   background-color: transparent;
   line-height: 1rem;
@@ -445,13 +445,13 @@
 
 .claro-details__description {
   margin-bottom: 1rem;
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem; /* ~13px */
   line-height: 1.0625rem; /* 17px */
 }
 
 .claro-details__description.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 /**
@@ -549,7 +549,7 @@
 
 .claro-details__summary-summary {
   display: block;
-  color: #545560;
+  color: #55565b;
   font-size: 0.889rem;
   font-weight: normal;
 }
diff --git a/core/themes/claro/css/components/details.pcss.css b/core/themes/claro/css/components/details.pcss.css
index 38fea6f4da80..d34e44d9075f 100644
--- a/core/themes/claro/css/components/details.pcss.css
+++ b/core/themes/claro/css/components/details.pcss.css
@@ -78,7 +78,7 @@
   transition: background-color var(--details-bg-color-transition-duration) ease-in-out;
   word-wrap: break-word;
   hyphens: auto;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   border-radius: var(--size-summary-border-radius);
   background-color: transparent;
   line-height: var(--space-m);
@@ -388,7 +388,7 @@
 .claro-details__wrapper--accordion-item,
 .claro-details__wrapper--vertical-tabs-item {
   border-top: var(--details-border-size) solid var(--details-border-color);
-  background-color: var(--color-whitesmoke-o-40);
+  background-color: var(--color-gray-050-o-40);
 }
 
 @media screen and (min-width: 48em) {
@@ -525,7 +525,7 @@
 
 .claro-details__summary-summary {
   display: block;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-size: var(--font-size-s);
   font-weight: normal;
 }
diff --git a/core/themes/claro/css/components/dialog.css b/core/themes/claro/css/components/dialog.css
index 2d7dd7659caa..3844591bfc84 100644
--- a/core/themes/claro/css/components/dialog.css
+++ b/core/themes/claro/css/components/dialog.css
@@ -15,7 +15,7 @@
   border: 0;
   border-radius: 0.25rem;
   background: transparent;
-  box-shadow: 0 0 1rem -0.25rem #222330;
+  box-shadow: 0 0 1rem -0.25rem #232429;
 }
 
 .ui-dialog:focus {
@@ -37,7 +37,7 @@
   color: #fff;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
-  background: #222330;
+  background: #232429;
   line-height: 2rem;
 }
 
@@ -94,12 +94,12 @@
 .ui-dialog > .ui-dialog-content {
   overflow: auto;
   padding: 1rem 1.5rem;
-  color: #222330;
+  color: #232429;
   background: #fff;
 }
 
 .ui-dialog > .ui-dialog-buttonpane {
-  color: #222330;
+  color: #232429;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px;
   background: #f3f4f9;
diff --git a/core/themes/claro/css/components/dialog.pcss.css b/core/themes/claro/css/components/dialog.pcss.css
index 2eac5980987e..b0be947e86bc 100644
--- a/core/themes/claro/css/components/dialog.pcss.css
+++ b/core/themes/claro/css/components/dialog.pcss.css
@@ -95,7 +95,7 @@
   color: var(--color-text);
   border-bottom-right-radius: var(--jui-dialog-border-radius);
   border-bottom-left-radius: var(--jui-dialog-border-radius);
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
 }
 
 .ui-dialog-buttonpane .ui-dialog-buttonset {
diff --git a/core/themes/claro/css/components/dropbutton.css b/core/themes/claro/css/components/dropbutton.css
index 6d297e2f73a0..7556948a02dc 100644
--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -122,7 +122,7 @@
   height: 3rem;
   border: 1px solid transparent !important; /* 1 */
   border-radius: 0 2px 2px 0; /* LTR */
-  background: #d4d4d8;
+  background: #d3d4d9;
   font-size: 1px; /* iOS Safari sets a minimum button-width based on font-size. */
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -150,8 +150,8 @@
 /* Toggler states. */
 
 .dropbutton__toggle:hover {
-  color: #222330;
-  background-color: #c2c3ca;
+  color: #232429;
+  background-color: #c1c2c7;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
 }
 
@@ -160,7 +160,7 @@
 }
 
 .dropbutton__toggle:active {
-  color: #222330;
+  color: #232429;
   background-color: #adaeb3;
 }
 
@@ -238,10 +238,10 @@
   cursor: pointer;
   text-align: center;
   text-decoration: none;
-  color: #222330;
+  color: #232429;
   border: 1px solid transparent !important; /* 1 */
   border-radius: 2px;
-  background-color: #d4d4d8;
+  background-color: #d3d4d9;
   font-size: 1rem;
   font-weight: 700;
   line-height: 1rem;
@@ -275,8 +275,8 @@
 .dropbutton__item:first-of-type > *:hover,
 .dropbutton__item:first-of-type > .button:hover {
   text-decoration: none;
-  color: #222330;
-  background-color: #c2c3ca;
+  color: #232429;
+  background-color: #c1c2c7;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
 }
 
@@ -290,7 +290,7 @@
 }
 
 .dropbutton__item:first-of-type > *:active {
-  color: #222330;
+  color: #232429;
   background-color: #adaeb3;
 }
 
@@ -334,7 +334,7 @@
  */
 
 .dropbutton__item:first-of-type ~ .dropbutton__item {
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
   border-bottom: 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 }
@@ -344,7 +344,7 @@
 }
 
 .dropbutton__item ~ .dropbutton__item:last-child {
-  border-bottom: 1px solid #d4d4d8;
+  border-bottom: 1px solid #d3d4d9;
   border-radius: 0 0 2px 2px;
 }
 
@@ -357,7 +357,7 @@
   position: relative;
   padding: calc(1rem - 1px);
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   border: 1px solid transparent !important; /* 1 */
   border-radius: 2px;
   background: #fff;
@@ -411,7 +411,7 @@
 }
 
 .dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
-  color: #222330;
+  color: #232429;
   background: #f3f4f9;
 }
 
diff --git a/core/themes/claro/css/components/dropbutton.pcss.css b/core/themes/claro/css/components/dropbutton.pcss.css
index 2da904bd598c..9fd1754ecdd8 100644
--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -319,7 +319,7 @@
  * Non-first dropbutton list elements.
  */
 .dropbutton__item:first-of-type ~ .dropbutton__item {
-  border: var(--dropbutton-border-size) solid var(--color-lightgray);
+  border: var(--dropbutton-border-size) solid var(--color-gray-200);
   border-bottom: 0;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 }
@@ -329,7 +329,7 @@
 }
 
 .dropbutton__item ~ .dropbutton__item:last-child {
-  border-bottom: var(--dropbutton-border-size) solid var(--color-lightgray);
+  border-bottom: var(--dropbutton-border-size) solid var(--color-gray-200);
   border-radius: 0 0 var(--dropbutton-border-radius-size) var(--dropbutton-border-radius-size);
 }
 
@@ -341,7 +341,7 @@
   position: relative;
   padding: calc(var(--dropbutton-spacing-size) - var(--dropbutton-border-size));
   text-decoration: none;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   border: var(--dropbutton-border-size) solid transparent !important; /* 1 */
   border-radius: var(--dropbutton-border-radius-size);
   background: var(--color-white);
@@ -393,7 +393,7 @@
 
 .dropbutton__item:first-of-type ~ .dropbutton__item > *:hover {
   color: var(--color-text);
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
 }
 
 .dropbutton__item > .button:not(:focus) {
diff --git a/core/themes/claro/css/components/entity-meta.css b/core/themes/claro/css/components/entity-meta.css
index bb7fbcabb3f0..bdd1a97d143a 100644
--- a/core/themes/claro/css/components/entity-meta.css
+++ b/core/themes/claro/css/components/entity-meta.css
@@ -12,7 +12,7 @@
 
 .entity-meta__header {
   padding: 0.5rem 1rem 1rem;
-  color: #222330;
+  color: #232429;
   border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
diff --git a/core/themes/claro/css/components/fieldset.css b/core/themes/claro/css/components/fieldset.css
index d20f091b24c5..4f579e2990c2 100644
--- a/core/themes/claro/css/components/fieldset.css
+++ b/core/themes/claro/css/components/fieldset.css
@@ -14,7 +14,7 @@
   min-width: 0;
   margin: 1rem 0;
   padding: 0;
-  color: #222330;
+  color: #232429;
   border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
@@ -49,7 +49,7 @@ _:-ms-fullscreen,
   float: left; /* iOS Safari, Android Chrome, Edge. */
   width: 100%; /* iOS Safari, Android Chrome, Edge. */
   margin-bottom: 1rem;
-  color: #545560;
+  color: #55565b;
   font-weight: bold;
 }
 
@@ -95,7 +95,7 @@ _:-ms-fullscreen,
 }
 
 .fieldset__label.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 .fieldset__label.has-error {
@@ -105,13 +105,13 @@ _:-ms-fullscreen,
 .fieldset__description {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem; /* ~13px */
   line-height: 1.0625rem; /* 17px */
 }
 
 .fieldset__description.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 /* Error message (Inline form errors). */
diff --git a/core/themes/claro/css/components/fieldset.pcss.css b/core/themes/claro/css/components/fieldset.pcss.css
index ed46ca471953..87669f06171b 100644
--- a/core/themes/claro/css/components/fieldset.pcss.css
+++ b/core/themes/claro/css/components/fieldset.pcss.css
@@ -41,7 +41,7 @@ _:-ms-fullscreen,
   float: left; /* iOS Safari, Android Chrome, Edge. */
   width: 100%; /* iOS Safari, Android Chrome, Edge. */
   margin-bottom: var(--space-m);
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-weight: bold;
 }
 
diff --git a/core/themes/claro/css/components/file.css b/core/themes/claro/css/components/file.css
index 1e83b71c8215..27bc76fb8acf 100644
--- a/core/themes/claro/css/components/file.css
+++ b/core/themes/claro/css/components/file.css
@@ -24,5 +24,5 @@
 }
 
 .file__size {
-  color: #545560;
+  color: #55565b;
 }
diff --git a/core/themes/claro/css/components/file.pcss.css b/core/themes/claro/css/components/file.pcss.css
index 5d713f11394b..0c277eb557f8 100644
--- a/core/themes/claro/css/components/file.pcss.css
+++ b/core/themes/claro/css/components/file.pcss.css
@@ -18,5 +18,5 @@
 }
 
 .file__size {
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
 }
diff --git a/core/themes/claro/css/components/form--checkbox-radio--ie.css b/core/themes/claro/css/components/form--checkbox-radio--ie.css
index 3f80d2210db3..44c46188de24 100644
--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -17,7 +17,7 @@
   height: 1.125rem;
   vertical-align: text-bottom;
   color: transparent; /* IE */
-  border: 1px solid #8e929c;
+  border: 1px solid #919297;
   border-radius: 2px;
   background: #fff no-repeat 50% 50%;
   background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
@@ -37,13 +37,13 @@
 
 .form-boolean:active::-ms-check,
 .form-boolean:hover::-ms-check {
-  border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  border-color: #232429;
+  box-shadow: inset 0 0 0 1px #232429;
 }
 
 .form-boolean:focus:active::-ms-check,
 .form-boolean:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
 }
 
 .form-boolean--type-checkbox:checked::-ms-check {
@@ -55,8 +55,8 @@
 
 .form-boolean--type-checkbox:checked:active::-ms-check,
 .form-boolean--type-checkbox:checked:hover::-ms-check {
-  border-color: #222330;
-  background-color: #222330;
+  border-color: #232429;
+  background-color: #232429;
 }
 
 .form-boolean--type-radio:checked::-ms-check {
@@ -68,8 +68,8 @@
 
 .form-boolean--type-checkbox:checked:active::-ms-check,
 .form-boolean--type-checkbox:checked:hover::-ms-check {
-  border-color: #222330;
-  background-color: #222330;
+  border-color: #232429;
+  background-color: #232429;
 }
 
 .form-boolean--type-radio:checked::-ms-check {
@@ -84,14 +84,14 @@
 
 .form-boolean--type-radio:checked:active::-ms-check,
 .form-boolean--type-radio:checked:hover::-ms-check {
-  border-color: #222330;
+  border-color: #232429;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 1px #232429;
 }
 
 .form-boolean--type-radio:checked:focus:active::-ms-check,
 .form-boolean--type-radio:checked:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--checkbox-radio.css b/core/themes/claro/css/components/form--checkbox-radio.css
index a01aaec55110..f31467fa0e0d 100644
--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -79,7 +79,7 @@
   width: 1.125rem;
   height: 1.125rem;
   vertical-align: text-bottom;
-  border: 1px solid #8e929c;
+  border: 1px solid #919297;
   border-radius: 2px;
   background: #fff no-repeat 50% 50%;
   background-image: url("data:image/svg+xml,%3csvg width='12' height='10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.182 6.966L1.977 4.649l-.182-.19-.18.19-.796.835-.164.173.164.172L4 9.172l.18.19.182-.19 6.818-7.164.164-.172-.164-.173-.795-.835-.181-.19-.182.19-5.841 6.138z' fill='%23FFF'/%3e%3c/svg%3e");
@@ -98,13 +98,13 @@
 
 .form-boolean:active,
 .form-boolean:hover {
-  border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  border-color: #232429;
+  box-shadow: inset 0 0 0 1px #232429;
 }
 
 .form-boolean:focus:active,
 .form-boolean:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
 }
 
 .form-boolean--type-checkbox:checked {
@@ -115,8 +115,8 @@
 
 .form-boolean--type-checkbox:checked:active,
 .form-boolean--type-checkbox:checked:hover {
-  border-color: #222330;
-  background-color: #222330;
+  border-color: #232429;
+  background-color: #232429;
 }
 
 .form-boolean--type-radio:checked {
@@ -131,14 +131,14 @@
 
 .form-boolean--type-radio:checked:active,
 .form-boolean--type-radio:checked:hover {
-  border-color: #222330;
+  border-color: #232429;
   background-image: url("data:image/svg+xml,%3csvg width='17' height='17' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle r='4.5' cx='8.5' cy='8.5' fill='%23222330'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #222330;
+  box-shadow: inset 0 0 0 1px #232429;
 }
 
 .form-boolean--type-radio:checked:focus:active,
 .form-boolean--type-radio:checked:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form--password-confirm.css b/core/themes/claro/css/components/form--password-confirm.css
index 3a4e2bcf2f1d..f6edac5e758c 100644
--- a/core/themes/claro/css/components/form--password-confirm.css
+++ b/core/themes/claro/css/components/form--password-confirm.css
@@ -71,9 +71,9 @@
   height: calc(0.5rem - 2px);
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  border: 1px solid #8e929c;
+  border: 1px solid #919297;
   border-radius: 0.5rem;
-  background-color: #d4d4d8;
+  background-color: #d3d4d9;
 }
 
 .password-strength__track::after {
@@ -113,13 +113,13 @@
   overflow: hidden;
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem;
   line-height: 1rem;
 }
 
 .password-strength__text {
-  color: #222330;
+  color: #232429;
   font-weight: bold;
 }
 
@@ -160,12 +160,12 @@
 .password-match-message {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem;
 }
 
 .password-match-message__text {
-  color: #222330;
+  color: #232429;
   font-weight: bold;
 }
 
@@ -183,8 +183,8 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   padding: 1rem;
-  color: #545560;
-  border: 1px solid #d4d4d8;
+  color: #55565b;
+  border: 1px solid #d3d4d9;
   border-radius: 2px;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
diff --git a/core/themes/claro/css/components/form--password-confirm.pcss.css b/core/themes/claro/css/components/form--password-confirm.pcss.css
index cf2cac451b1f..bdd5f816126b 100644
--- a/core/themes/claro/css/components/form--password-confirm.pcss.css
+++ b/core/themes/claro/css/components/form--password-confirm.pcss.css
@@ -181,7 +181,7 @@
   margin-bottom: var(--space-xs);
   padding: var(--space-m);
   color: var(--progress-bar-description-color);
-  border: 1px solid var(--color-lightgray);
+  border: 1px solid var(--color-gray-200);
   border-radius: var(--base-border-radius);
   background-color: var(--color-white);
   box-shadow: var(--details-box-shadow);
diff --git a/core/themes/claro/css/components/form--text.css b/core/themes/claro/css/components/form--text.css
index 9d1c43acc42f..2448b96675ff 100644
--- a/core/themes/claro/css/components/form--text.css
+++ b/core/themes/claro/css/components/form--text.css
@@ -15,8 +15,8 @@
   max-width: 100%;
   min-height: 3rem; /* iOS. */
   padding: calc(0.75rem - 1px) calc(1rem - 1px);
-  color: #222330;
-  border: 1px solid #8e929c;
+  color: #232429;
+  border: 1px solid #919297;
   border-radius: 0.125rem;
   background: #fff;
   font-size: 1rem;
@@ -109,8 +109,8 @@ _:-ms-fullscreen,
 }
 
 .form-element:hover {
-  border-color: #222330;
-  box-shadow: inset 0 0 0 1px #222330;
+  border-color: #232429;
+  box-shadow: inset 0 0 0 1px #232429;
 }
 
 .form-element:focus {
@@ -118,7 +118,7 @@ _:-ms-fullscreen,
 }
 
 .form-element:hover:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #222330;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #232429;
 }
 
 .form-element.error {
@@ -139,12 +139,12 @@ _:-ms-fullscreen,
 }
 
 .form-element[disabled] {
-  color: #82828c;
+  color: #828388;
   border-color: #bababf;
   background-color: #f2f2f3;
   box-shadow: none;
   /* https://stackoverflow.com/q/262158#answer-23511280 */
-  -webkit-text-fill-color: #82828c;
+  -webkit-text-fill-color: #828388;
 }
 
 /**
diff --git a/core/themes/claro/css/components/form.css b/core/themes/claro/css/components/form.css
index 44655e73411d..827e7f745ca8 100644
--- a/core/themes/claro/css/components/form.css
+++ b/core/themes/claro/css/components/form.css
@@ -11,17 +11,17 @@
  */
 
 :-ms-input-placeholder {
-  color: #8e929c;
+  color: #919297;
 }
 
 ::placeholder {
-  color: #8e929c;
+  color: #919297;
 }
 
 /* IE 10 and 11 needs this set as important. */
 
 :-ms-input-placeholder {
-  color: #8e929c !important;
+  color: #919297 !important;
 }
 
 /**
@@ -87,7 +87,7 @@ tr .form-item,
 
 .form-item__label.is-disabled {
   cursor: default; /* @todo ...or auto? */
-  color: #82828c;
+  color: #828388;
 }
 
 .form-item__label.form-required::after,
@@ -107,7 +107,7 @@ tr .form-item,
 .form-item__description {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem; /* ~13px */
   line-height: 1.0625rem; /* 17px */
 }
@@ -115,7 +115,7 @@ tr .form-item,
 /* Description states. */
 
 .form-item__description.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 /**
@@ -133,7 +133,7 @@ tr .form-item,
 
 .form-item__prefix.is-disabled,
 .form-item__suffix.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 /* Add some spacing so that the focus ring and suffix don't overlap. */
diff --git a/core/themes/claro/css/components/icon-link.css b/core/themes/claro/css/components/icon-link.css
index 0d1b84eade06..d7f5a1f3d892 100644
--- a/core/themes/claro/css/components/icon-link.css
+++ b/core/themes/claro/css/components/icon-link.css
@@ -19,7 +19,7 @@
 .icon-link {
   display: flex;
   padding: 0;
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
   border-radius: 50%;
   background-color: #fff;
 }
diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css
index cdbfc8e685dc..eb73ce4e7049 100644
--- a/core/themes/claro/css/components/icon-link.pcss.css
+++ b/core/themes/claro/css/components/icon-link.pcss.css
@@ -8,13 +8,13 @@
 :root {
   /* default */
   --icon-link-bg-color: var(--color-white);
-  --icon-link-border-color: var(--color-lightgray);
+  --icon-link-border-color: var(--color-gray-200);
   /* active */
   --icon-link--active-bg-color: var(--color-absolutezero);
   --icon-link--active-border-color: var(--color-absolutezero);
   /* hover */
   --icon-link--hover-bg-color: var(--color-bgblue-hover);
-  --icon-link--hover-border-color: var(--color-lightgray-o-80);
+  --icon-link--hover-border-color: var(--color-gray-200-o-80);
 }
 
 .icon-link {
diff --git a/core/themes/claro/css/components/image-preview.css b/core/themes/claro/css/components/image-preview.css
index 772b1e85849e..4d836c568e28 100644
--- a/core/themes/claro/css/components/image-preview.css
+++ b/core/themes/claro/css/components/image-preview.css
@@ -22,15 +22,15 @@
   display: inline-block;
   max-width: 100%;
   background-color: #fff;
-  box-shadow: inset 0 0 0.4375rem #d4d4d8;
+  box-shadow: inset 0 0 0.4375rem #d3d4d9;
 }
 
 .image-preview img {
   background-image:
-    linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
-    linear-gradient(-45deg, #d4d4d8 25%, transparent 26%),
-    linear-gradient(135deg, #d4d4d8 25%, transparent 26%),
-    linear-gradient(135deg, #d4d4d8 25%, transparent 26%);
+    linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
+    linear-gradient(-45deg, #d3d4d9 25%, transparent 26%),
+    linear-gradient(135deg, #d3d4d9 25%, transparent 26%),
+    linear-gradient(135deg, #d3d4d9 25%, transparent 26%);
   background-position:
     0 0,
     0.4375rem 0.4375rem,
diff --git a/core/themes/claro/css/components/image-preview.pcss.css b/core/themes/claro/css/components/image-preview.pcss.css
index 7ddbe1e8a204..2d65004aba09 100644
--- a/core/themes/claro/css/components/image-preview.pcss.css
+++ b/core/themes/claro/css/components/image-preview.pcss.css
@@ -6,7 +6,7 @@
 @import "../base/variables.pcss.css";
 
 :root {
-  --color-pattern: var(--color-lightgray);
+  --color-pattern: var(--color-gray-200);
   --size-pattern-square: calc(7rem / 16);
 }
 
diff --git a/core/themes/claro/css/components/jquery.ui/theme.css b/core/themes/claro/css/components/jquery.ui/theme.css
index 29a06c2bbdaa..9db21952ce7c 100644
--- a/core/themes/claro/css/components/jquery.ui/theme.css
+++ b/core/themes/claro/css/components/jquery.ui/theme.css
@@ -546,7 +546,7 @@
 .ui-widget-overlay {
   z-index: 1259;
   opacity: 0.7;
-  background: #222330;
+  background: #232429;
 }
 
 /**
@@ -597,7 +597,7 @@
 
 .ui-autocomplete {
   overflow: hidden;
-  color: #545560;
+  color: #55565b;
   border: 1px solid rgba(216, 217, 224, 0.8);
   border-top: 0;
   border-radius: 0 0 0.125rem 0.125rem;
diff --git a/core/themes/claro/css/components/pager.css b/core/themes/claro/css/components/pager.css
index 3fd0f09b5a4a..641275d53b27 100644
--- a/core/themes/claro/css/components/pager.css
+++ b/core/themes/claro/css/components/pager.css
@@ -54,7 +54,7 @@
   padding-right: 0.5rem;
   padding-left: 0.5rem;
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   border-radius: 1rem; /* Pager size ÷ 2 */
   background: #fff; /* Make sure that the text is visible on dark background. */
   line-height: 1;
@@ -68,7 +68,7 @@
 
 .pager__link:hover,
 .pager__link.is-active:hover {
-  color: #545560;
+  color: #55565b;
   background: #e6ecf8;
 }
 
diff --git a/core/themes/claro/css/components/pager.pcss.css b/core/themes/claro/css/components/pager.pcss.css
index 4e7b41a1b9d7..559cb3e24c91 100644
--- a/core/themes/claro/css/components/pager.pcss.css
+++ b/core/themes/claro/css/components/pager.pcss.css
@@ -11,7 +11,7 @@
   */
   --pager-size: 2rem; /* --space-m × 2 */
   --pager-border-width: 0.125rem; /* 2px */
-  --pager-fg-color: var(--color-davysgray);
+  --pager-fg-color: var(--color-gray-800);
   --pager-bg-color: var(--color-white);
   --pager--hover-bg-color: var(--color-bgblue-active);
   --pager--focus-bg-color: var(--color-focus);
diff --git a/core/themes/claro/css/components/progress.css b/core/themes/claro/css/components/progress.css
index 38106bf38081..c11401e950b6 100644
--- a/core/themes/claro/css/components/progress.css
+++ b/core/themes/claro/css/components/progress.css
@@ -35,9 +35,9 @@
 .progress__track {
   height: calc(1rem - 2px);
   margin-top: 0;
-  border: 1px #8e929c solid;
+  border: 1px #919297 solid;
   border-radius: 1rem;
-  background-color: #d4d4d8;
+  background-color: #d3d4d9;
 }
 
 .progress__bar {
@@ -73,7 +73,7 @@
 .progress__percentage {
   overflow: hidden;
   margin-top: 0.5rem;
-  color: #545560;
+  color: #55565b;
   font-size: 0.79rem;
 }
 
diff --git a/core/themes/claro/css/components/shortcut.css b/core/themes/claro/css/components/shortcut.css
index 7333d1779918..2fac89d5f69b 100644
--- a/core/themes/claro/css/components/shortcut.css
+++ b/core/themes/claro/css/components/shortcut.css
@@ -39,7 +39,7 @@
   opacity: 0;
   color: #fff;
   border-radius: 2px;
-  background: #545560;
+  background: #55565b;
   font-size: 0.889rem;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
diff --git a/core/themes/claro/css/components/shortcut.pcss.css b/core/themes/claro/css/components/shortcut.pcss.css
index 431d8b6ea596..bdc7ee6fb44b 100644
--- a/core/themes/claro/css/components/shortcut.pcss.css
+++ b/core/themes/claro/css/components/shortcut.pcss.css
@@ -10,7 +10,7 @@
   /**
   * Shortcut action.
   */
-  --shortcut-bg-color: var(--color-davysgray);
+  --shortcut-bg-color: var(--color-gray-800);
   --shortcut-border-radius-size: var(--base-border-radius);
   --shortcut-padding-size: calc(0.5 * var(--space-xs)) var(--space-m);
   --shortcut-icon-size: var(--space-l);
diff --git a/core/themes/claro/css/components/system-admin--admin-list.css b/core/themes/claro/css/components/system-admin--admin-list.css
index c9c072afeaef..4a566870119d 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.css
@@ -38,7 +38,7 @@
 }
 
 .admin-item:not(:last-child) {
-  border-bottom: 0.0625em solid #d4d4d8;
+  border-bottom: 0.0625em solid #d3d4d9;
 }
 
 .admin-item__title {
@@ -80,7 +80,7 @@
 
 .admin-item__description {
   margin: 0.5em 0 0.25em;
-  color: #82828c;
+  color: #828388;
 }
 
 [dir="rtl"] .admin-item__description {
diff --git a/core/themes/claro/css/components/system-admin--admin-list.pcss.css b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
index 42f1d5c77205..fa5e225c6c64 100644
--- a/core/themes/claro/css/components/system-admin--admin-list.pcss.css
+++ b/core/themes/claro/css/components/system-admin--admin-list.pcss.css
@@ -28,7 +28,7 @@
   padding-left: 1.5em;
 }
 .admin-item:not(:last-child) {
-  border-bottom: calc(1em / 16) solid var(--color-lightgray);
+  border-bottom: calc(1em / 16) solid var(--color-gray-200);
 }
 .admin-item__title {
   font-weight: bold;
@@ -64,7 +64,7 @@
 }
 .admin-item__description {
   margin: 0.5em 0 0.25em;
-  color: var(--color-oldsilver);
+  color: var(--color-gray-600);
 }
 [dir="rtl"] .admin-item__description {
   margin-right: 0;
diff --git a/core/themes/claro/css/components/system-admin--modules.css b/core/themes/claro/css/components/system-admin--modules.css
index 9081d82917d4..622fe38b3dd8 100644
--- a/core/themes/claro/css/components/system-admin--modules.css
+++ b/core/themes/claro/css/components/system-admin--modules.css
@@ -12,7 +12,7 @@
 
 .modules-table-filter {
   padding: 0.25rem 1.5rem;
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
   border-radius: 2px 2px 0 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -41,7 +41,7 @@
 }
 
 .claro-details__summary.claro-details__summary--package-listing {
-  color: #222330;
+  color: #232429;
   border-radius: 0.25rem;
   background: #f3f4f9;
   font-size: 1.125rem; /* 18px */
@@ -53,8 +53,8 @@
 }
 
 .module-list__module {
-  color: #222330;
-  border-bottom: 1px solid #d4d4d8;
+  color: #232429;
+  border-bottom: 1px solid #d3d4d9;
   background: none;
 }
 
@@ -185,6 +185,6 @@ td.module-list__description {
 .claro-details .tableresponsive-toggle-columns button {
   margin-top: 0.5rem;
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   font-weight: bold;
 }
diff --git a/core/themes/claro/css/components/system-admin--modules.pcss.css b/core/themes/claro/css/components/system-admin--modules.pcss.css
index e1f8aff08e7b..01c24cd65f17 100644
--- a/core/themes/claro/css/components/system-admin--modules.pcss.css
+++ b/core/themes/claro/css/components/system-admin--modules.pcss.css
@@ -12,7 +12,7 @@
 
 .modules-table-filter {
   padding: 0.25rem var(--space-l);
-  border: 1px solid var(--color-lightgray);
+  border: 1px solid var(--color-gray-200);
   border-radius: 2px 2px 0 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -42,7 +42,7 @@
 .claro-details__summary.claro-details__summary--package-listing {
   color: var(--color-text);
   border-radius: 4px;
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
   font-size: 1.125rem; /* 18px */
   line-height: 1.424rem; /* 23px */
 }
@@ -53,7 +53,7 @@
 
 .module-list__module {
   color: var(--color-text);
-  border-bottom: 1px solid var(--color-lightgray);
+  border-bottom: 1px solid var(--color-gray-200);
   background: none;
 }
 
@@ -179,6 +179,6 @@ td.module-list__description {
 .claro-details .tableresponsive-toggle-columns button {
   margin-top: var(--space-xs);
   text-decoration: none;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-weight: bold;
 }
diff --git a/core/themes/claro/css/components/system-admin--panel.css b/core/themes/claro/css/components/system-admin--panel.css
index d0cba306071a..4ca4e952cf0c 100644
--- a/core/themes/claro/css/components/system-admin--panel.css
+++ b/core/themes/claro/css/components/system-admin--panel.css
@@ -14,7 +14,7 @@
   margin-top: 1em;
   margin-bottom: 3em;
   padding: 0;
-  border-bottom: 0.0625em solid #d4d4d8;
+  border-bottom: 0.0625em solid #d3d4d9;
 }
 
 .panel__title {
diff --git a/core/themes/claro/css/components/system-admin--panel.pcss.css b/core/themes/claro/css/components/system-admin--panel.pcss.css
index 79035daca264..947aff1c1f72 100644
--- a/core/themes/claro/css/components/system-admin--panel.pcss.css
+++ b/core/themes/claro/css/components/system-admin--panel.pcss.css
@@ -9,12 +9,12 @@
   margin-top: 1em;
   margin-bottom: 3em;
   padding: 0;
-  border-bottom: calc(1em / 16) solid var(--color-lightgray);
+  border-bottom: calc(1em / 16) solid var(--color-gray-200);
 }
 .panel__title {
   margin: 0;
   padding: calc(12em / 18) calc(24em / 18);
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
   font-size: calc(18em / 16);
   line-height: calc(24em / 18);
 }
diff --git a/core/themes/claro/css/components/system-admin--status-report.css b/core/themes/claro/css/components/system-admin--status-report.css
index b2aaf45b0bf2..6e16019bcc32 100644
--- a/core/themes/claro/css/components/system-admin--status-report.css
+++ b/core/themes/claro/css/components/system-admin--status-report.css
@@ -80,7 +80,7 @@
 
 .system-status-report__row {
   display: flex;
-  border-bottom: 1px solid #d4d4d8;
+  border-bottom: 1px solid #d3d4d9;
 }
 
 .system-status-report__row:last-of-type {
diff --git a/core/themes/claro/css/components/system-admin--status-report.pcss.css b/core/themes/claro/css/components/system-admin--status-report.pcss.css
index 5285aaa50239..f7317179eda5 100644
--- a/core/themes/claro/css/components/system-admin--status-report.pcss.css
+++ b/core/themes/claro/css/components/system-admin--status-report.pcss.css
@@ -69,7 +69,7 @@
 
 .system-status-report__row {
   display: flex;
-  border-bottom: 1px solid #d4d4d8;
+  border-bottom: 1px solid #d3d4d9;
 }
 .system-status-report__row:last-of-type {
   border-bottom: none;
diff --git a/core/themes/claro/css/components/system-status-report.pcss.css b/core/themes/claro/css/components/system-status-report.pcss.css
index 46172528fea1..bb2099007304 100644
--- a/core/themes/claro/css/components/system-status-report.pcss.css
+++ b/core/themes/claro/css/components/system-status-report.pcss.css
@@ -98,7 +98,7 @@
 }
 
 .claro-details__summary--system-status-report {
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
 }
 
 @media screen and (max-width: 48em) {
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.css b/core/themes/claro/css/components/table--file-multiple-widget.css
index 299640b97ee4..0759677fd5d6 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.css
@@ -63,7 +63,7 @@
 
 .table-file-multiple-widget th {
   height: 2rem;
-  color: #545560;
+  color: #55565b;
   background: #f3f4f9;
   font-size: 0.889rem;
 }
diff --git a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
index f6819bcd1b8a..e2dfb50803f6 100644
--- a/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
+++ b/core/themes/claro/css/components/table--file-multiple-widget.pcss.css
@@ -55,8 +55,8 @@
 
 .table-file-multiple-widget th {
   height: calc(var(--space-m) * 2);
-  color: var(--color-davysgray);
-  background: var(--color-whitesmoke);
+  color: var(--color-gray-800);
+  background: var(--color-gray-050);
   font-size: var(--font-size-s);
 }
 
diff --git a/core/themes/claro/css/components/tabledrag.css b/core/themes/claro/css/components/tabledrag.css
index 197bbd6f6248..edc188d6eaff 100644
--- a/core/themes/claro/css/components/tabledrag.css
+++ b/core/themes/claro/css/components/tabledrag.css
@@ -27,7 +27,7 @@ body.drag {
 /* Empty region message row in table. */
 
 .region-message {
-  color: #82828c;
+  color: #828388;
 }
 
 /* If the region is populated, we shouldn't display the empty message. */
diff --git a/core/themes/claro/css/components/tabledrag.pcss.css b/core/themes/claro/css/components/tabledrag.pcss.css
index 5522612d8def..7ffd6160316c 100644
--- a/core/themes/claro/css/components/tabledrag.pcss.css
+++ b/core/themes/claro/css/components/tabledrag.pcss.css
@@ -23,7 +23,7 @@ body.drag {
 }
 /* Empty region message row in table. */
 .region-message {
-  color: var(--color-oldsilver);
+  color: var(--color-gray-600);
 }
 /* If the region is populated, we shouldn't display the empty message. */
 .region-message.region-populated {
diff --git a/core/themes/claro/css/components/tables.css b/core/themes/claro/css/components/tables.css
index da617a597e55..7bdcf31352a6 100644
--- a/core/themes/claro/css/components/tables.css
+++ b/core/themes/claro/css/components/tables.css
@@ -35,7 +35,7 @@ th {
   height: 3rem;
   padding: 0.5rem 1rem;
   text-align: left; /* LTR */
-  color: #222330;
+  color: #232429;
   background: #f3f4f9;
   line-height: 1.25rem; /* 20px */
 }
@@ -158,12 +158,12 @@ _:-ms-fullscreen, /* Only IE 11 */
 }
 
 tr {
-  border-bottom: 0.0625rem solid #d4d4d8;
+  border-bottom: 0.0625rem solid #d3d4d9;
 }
 
 tr,
 .draggable-table.tabledrag-disabled tr {
-  color: #222330;
+  color: #232429;
   background: #fff;
 }
 
@@ -173,19 +173,19 @@ thead tr {
 
 tr:hover,
 tr:focus {
-  color: #222330;
+  color: #232429;
   background: #f0f5fd;
 }
 
 tr.color-warning:hover,
 tr.color-warning:focus {
-  color: #222330;
+  color: #232429;
   background: #fdf8ed;
 }
 
 tr.color-error:hover,
 tr.color-error:focus {
-  color: #222330;
+  color: #232429;
   background: #fcf4f2;
 }
 
@@ -227,7 +227,7 @@ td > .ajax-new-content > .form-item > .form-element {
 /* Win over table-file-multiple-widget. */
 
 th.is-disabled.is-disabled {
-  color: #82828c;
+  color: #828388;
 }
 
 /* Force browsers to calculate the width of a 'select all' <th> element. */
@@ -253,7 +253,7 @@ tfoot tr:last-child {
 }
 
 tfoot tr:first-child td {
-  border-top: 0.0625rem solid #8e929c;
+  border-top: 0.0625rem solid #919297;
 }
 
 /**
diff --git a/core/themes/claro/css/components/tables.pcss.css b/core/themes/claro/css/components/tables.pcss.css
index 67af38b70274..5b70ab75c837 100644
--- a/core/themes/claro/css/components/tables.pcss.css
+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -29,7 +29,7 @@ th {
   padding: var(--space-xs) var(--space-m);
   text-align: left; /* LTR */
   color: var(--color-text);
-  background: var(--color-whitesmoke);
+  background: var(--color-gray-050);
   line-height: 1.25rem; /* 20px */
 }
 [dir="rtl"] th {
@@ -128,7 +128,7 @@ _:-ms-fullscreen, /* Only IE 11 */
 }
 
 tr {
-  border-bottom: 0.0625rem solid var(--color-lightgray);
+  border-bottom: 0.0625rem solid var(--color-gray-200);
 }
 tr,
 .draggable-table.tabledrag-disabled tr {
@@ -207,7 +207,7 @@ tfoot tr:last-child {
   border-bottom: 0;
 }
 tfoot tr:first-child td {
-  border-top: 0.0625rem solid var(--color-grayblue);
+  border-top: 0.0625rem solid var(--color-gray-500);
 }
 
 /**
diff --git a/core/themes/claro/css/components/tabs.css b/core/themes/claro/css/components/tabs.css
index 5730360361ff..189cf5bbebde 100644
--- a/core/themes/claro/css/components/tabs.css
+++ b/core/themes/claro/css/components/tabs.css
@@ -24,7 +24,7 @@
   flex-direction: column;
   width: 100%;
   margin: 0 0 1.5rem 0;
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -35,8 +35,8 @@
 
 .tabs__tab {
   position: relative;
-  border-bottom: 1px solid #d4d4d8;
-  background-color: #fafbfd;
+  border-bottom: 1px solid #d3d4d9;
+  background-color: #f9faff;
   font-size: 0.889rem;
   font-weight: bold;
 }
@@ -62,7 +62,7 @@
   min-height: 3rem;
   padding: 0.75rem 1.5rem;
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   line-height: 1.2rem;
 }
 
@@ -71,7 +71,7 @@
   margin: -1px;
   padding-left: calc(1.5rem - 2px); /* LTR */
   text-decoration: none;
-  color: #545560;
+  color: #55565b;
   border: 3px solid #26a769;
   border-radius: 2px;
   outline: none;
@@ -85,7 +85,7 @@
 
 .tabs__link:hover {
   text-decoration: none;
-  color: #222330;
+  color: #232429;
 }
 
 .tabs__link.is-active {
@@ -112,7 +112,7 @@
 }
 
 .tabs__link.is-active:hover {
-  color: #222330;
+  color: #232429;
 }
 
 /* Active and hover indicator. */
@@ -230,7 +230,7 @@
     display: block;
     width: 100%;
     content: "";
-    border-bottom: 1px solid #d4d4d8;
+    border-bottom: 1px solid #d3d4d9;
   }
 
   .is-horizontal .tabs__tab {
@@ -268,7 +268,7 @@
     margin: 0;
     padding-right: 2rem;
     padding-left: 2rem;
-    color: #222330;
+    color: #232429;
     border: none;
     border-radius: 2px 2px 0 0;
     outline: 2px dotted transparent;
diff --git a/core/themes/claro/css/components/tabs.pcss.css b/core/themes/claro/css/components/tabs.pcss.css
index cb814e833858..38248652d15c 100644
--- a/core/themes/claro/css/components/tabs.pcss.css
+++ b/core/themes/claro/css/components/tabs.pcss.css
@@ -14,7 +14,7 @@
   --tabs--active-height: 3px;
   --tabs-link-height: 3rem; /* 48px */
   --tabs-secondary-link-height: 2.5rem; /* 40px */
-  --tabs-base-border: 1px solid var(--color-lightgray);
+  --tabs-base-border: 1px solid var(--color-gray-200);
   --tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);
   --tabs--hover-bg-color: #e6ecf8;
@@ -39,7 +39,7 @@
 .tabs__tab {
   position: relative;
   border-bottom: var(--tabs-base-border);
-  background-color: var(--color-whitesmoke-light);
+  background-color: var(--color-gray-025);
   font-size: var(--font-size-s);
   font-weight: bold;
 }
@@ -63,7 +63,7 @@
   min-height: var(--tabs-link-height);
   padding: var(--space-s) var(--space-l);
   text-decoration: none;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   line-height: 1.2rem;
 }
 .tabs__link:focus {
@@ -71,7 +71,7 @@
   margin: -1px;
   padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */
   text-decoration: none;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   border: var(--tabs--focus-height) solid var(--color-focus);
   border-radius: var(--tabs-border-radius-size);
   outline: none;
@@ -212,7 +212,7 @@
     display: block;
     width: 100%;
     content: "";
-    border-bottom: 1px solid var(--color-lightgray);
+    border-bottom: 1px solid var(--color-gray-200);
   }
 
   .is-horizontal .tabs__tab {
@@ -260,7 +260,7 @@
     border: none;
   }
   .is-horizontal .tabs--primary .tabs__link:focus {
-    box-shadow: 0 0 0 2px var(--color-whitesmoke), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
+    box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);
   }
 
   .is-horizontal .tabs__link:hover {
diff --git a/core/themes/claro/css/components/vertical-tabs.css b/core/themes/claro/css/components/vertical-tabs.css
index a85e9483797b..44662185f08a 100644
--- a/core/themes/claro/css/components/vertical-tabs.css
+++ b/core/themes/claro/css/components/vertical-tabs.css
@@ -41,7 +41,7 @@
   margin: 0;
   padding-top: 0.5rem;
   list-style: none;
-  color: #222330;
+  color: #232429;
 }
 
 [dir="rtl"] .vertical-tabs__menu {
@@ -85,7 +85,7 @@
   display: block;
   width: 100%;
   margin-top: -1px;
-  border-top: 1px solid #d4d4d8;
+  border-top: 1px solid #d3d4d9;
 }
 
 /**
@@ -143,7 +143,7 @@
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-  color: #222330;
+  color: #232429;
   border: 1px solid transparent;
   border-width: 1px 0 1px 4px; /* LTR */
   border-radius: 2px 0 0 2px; /* LTR */
@@ -265,7 +265,7 @@
 
 .vertical-tabs__menu-link-summary {
   display: block;
-  color: #545560;
+  color: #55565b;
   font-size: 0.889rem;
   font-weight: normal;
 }
@@ -278,7 +278,7 @@
   box-sizing: border-box;
   margin-top: 0.75rem;
   margin-bottom: 0.75rem;
-  color: #222330;
+  color: #232429;
   border: 1px solid #dedfe4;
   border-radius: 2px;
   background-color: #fff;
diff --git a/core/themes/claro/css/components/vertical-tabs.pcss.css b/core/themes/claro/css/components/vertical-tabs.pcss.css
index 74d95f5c0e2c..08131f4f9c24 100644
--- a/core/themes/claro/css/components/vertical-tabs.pcss.css
+++ b/core/themes/claro/css/components/vertical-tabs.pcss.css
@@ -241,7 +241,7 @@
  */
 .vertical-tabs__menu-link-summary {
   display: block;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-size: var(--font-size-s);
   font-weight: normal;
 }
diff --git a/core/themes/claro/css/components/views-ui.css b/core/themes/claro/css/components/views-ui.css
index 6fc7a1737587..d1cfe47438b7 100644
--- a/core/themes/claro/css/components/views-ui.css
+++ b/core/themes/claro/css/components/views-ui.css
@@ -87,7 +87,7 @@ details.fieldset-no-legend {
 .views-ui-dialog .form-item:first-of-type.description {
   margin: 0 0 1.5rem 0;
   padding-bottom: 0.75rem;
-  border-bottom: 0.0625rem solid #d4d4d8;
+  border-bottom: 0.0625rem solid #d3d4d9;
   font-weight: bold;
 }
 
@@ -309,7 +309,7 @@ details.fieldset-no-legend {
 
 .views-tabs .add a {
   padding: 0.5625rem 0.8125rem 0.5625rem 0.5625rem;
-  color: #545560;
+  color: #55565b;
   border: none;
   border-radius: 2px;
   background-color: transparent;
@@ -456,7 +456,7 @@ details.fieldset-no-legend {
 }
 
 .views-ui-rearrange-filter-form tr:first-of-type {
-  border-top: 0.0625rem solid #d4d4d8;
+  border-top: 0.0625rem solid #d3d4d9;
 }
 
 .views-ui-rearrange-filter-form tr:not(.draggable):hover {
@@ -577,7 +577,7 @@ details.fieldset-no-legend {
 .views-config-group-region {
   display: table;
   margin: 1.5rem 0;
-  border: 0.0625rem solid #d4d4d8;
+  border: 0.0625rem solid #d3d4d9;
   border-collapse: collapse;
 }
 
@@ -585,7 +585,7 @@ details.fieldset-no-legend {
   position: relative;
   display: table-cell;
   padding: 1.5rem;
-  border: 0.0625rem solid #d4d4d8;
+  border: 0.0625rem solid #d3d4d9;
 }
 
 .views-config-group-region .views-group-box--operator {
@@ -627,7 +627,7 @@ details.fieldset-no-legend {
   width: 0.0625rem;
   height: 100%;
   content: "";
-  border-left: 0.0625rem solid #d4d4d8;
+  border-left: 0.0625rem solid #d3d4d9;
 }
 
 [dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
@@ -641,8 +641,8 @@ details.fieldset-no-legend {
   left: -1rem; /* LTR */
   padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
   content: ">";
-  color: #82828c;
-  border: 0.0625rem solid #d4d4d8;
+  color: #828388;
+  border: 0.0625rem solid #d3d4d9;
   background: #fff;
   font-size: 2.027rem;
   font-weight: bold;
diff --git a/core/themes/claro/css/components/views-ui.pcss.css b/core/themes/claro/css/components/views-ui.pcss.css
index 9e8a723ab059..8f9a95b17949 100644
--- a/core/themes/claro/css/components/views-ui.pcss.css
+++ b/core/themes/claro/css/components/views-ui.pcss.css
@@ -75,7 +75,7 @@ details.fieldset-no-legend {
 .views-ui-dialog .form-item:first-of-type.description {
   margin: 0 0 var(--space-l) 0;
   padding-bottom: var(--space-s);
-  border-bottom: 0.0625rem solid var(--color-lightgray);
+  border-bottom: 0.0625rem solid var(--color-gray-200);
   font-weight: bold;
 }
 
@@ -273,7 +273,7 @@ details.fieldset-no-legend {
 }
 .views-tabs .add a {
   padding: 9px 13px 9px 9px;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   border: none;
   border-radius: var(--base-border-radius);
   background-color: transparent;
@@ -397,7 +397,7 @@ details.fieldset-no-legend {
   border-bottom: 0;
 }
 .views-ui-rearrange-filter-form tr:first-of-type {
-  border-top: 0.0625rem solid var(--color-lightgray);
+  border-top: 0.0625rem solid var(--color-gray-200);
 }
 .views-ui-rearrange-filter-form tr:not(.draggable):hover {
   background: inherit;
@@ -509,14 +509,14 @@ details.fieldset-no-legend {
 .views-config-group-region {
   display: table;
   margin: var(--space-l) 0;
-  border: 0.0625rem solid var(--color-lightgray);
+  border: 0.0625rem solid var(--color-gray-200);
   border-collapse: collapse;
 }
 .views-config-group-region .views-group-box {
   position: relative;
   display: table-cell;
   padding: var(--space-l);
-  border: 0.0625rem solid var(--color-lightgray);
+  border: 0.0625rem solid var(--color-gray-200);
 }
 .views-config-group-region .views-group-box--operator {
   padding-right: var(--space-xl);
@@ -551,7 +551,7 @@ details.fieldset-no-legend {
   width: 0.0625rem;
   height: 100%;
   content: "";
-  border-left: 0.0625rem solid var(--color-lightgray);
+  border-left: 0.0625rem solid var(--color-gray-200);
 }
 [dir="rtl"] .views-config-group-region .views-group-box--value > .form-item::before {
   right: 0;
@@ -563,8 +563,8 @@ details.fieldset-no-legend {
   left: calc(0 - var(--space-m)); /* LTR */
   padding: 0 0.3rem 0.3rem 0.4rem; /* LTR */
   content: ">";
-  color: var(--color-oldsilver);
-  border: 0.0625rem solid var(--color-lightgray);
+  color: var(--color-gray-600);
+  border: 0.0625rem solid var(--color-gray-200);
   background: #fff;
   font-size: var(--font-size-h1);
   font-weight: bold;
diff --git a/core/themes/claro/css/theme/ckeditor-editor.css b/core/themes/claro/css/theme/ckeditor-editor.css
index bb3dc4abe854..05fadc971b45 100644
--- a/core/themes/claro/css/theme/ckeditor-editor.css
+++ b/core/themes/claro/css/theme/ckeditor-editor.css
@@ -45,14 +45,14 @@
 }
 /* Default */
 .cke.cke_chrome {
-  border-color: #8e929c;
+  border-color: #919297;
 }
 /* Hover. */
 .cke.cke_chrome:hover,
 .cke:hover .cke_contents,
 .cke:hover .cke_top,
 .cke:hover .cke_bottom {
-  border-color: #222330;
+  border-color: #232429;
 }
 /* Focus. */
 .cke.cke_chrome.cke_focus {
diff --git a/core/themes/claro/css/theme/filter.theme.css b/core/themes/claro/css/theme/filter.theme.css
index 656a64c81bc9..db62ffd5fee9 100644
--- a/core/themes/claro/css/theme/filter.theme.css
+++ b/core/themes/claro/css/theme/filter.theme.css
@@ -66,7 +66,7 @@
 
 .filter-guidelines__item {
   margin-top: 0.5em; /* (6 / 12) */
-  color: #545560;
+  color: #55565b;
   font-size: 0.75em; /* (12 / 16) */
 }
 
diff --git a/core/themes/claro/css/theme/maintenance-page.css b/core/themes/claro/css/theme/maintenance-page.css
index 4896e0b360e9..e4602957de85 100644
--- a/core/themes/claro/css/theme/maintenance-page.css
+++ b/core/themes/claro/css/theme/maintenance-page.css
@@ -18,7 +18,7 @@
 .site-name {
   margin-top: 1rem;
   word-wrap: break-word;
-  color: #545560;
+  color: #55565b;
   font-size: 1.424rem;
 }
 
@@ -29,7 +29,7 @@
 
 .content {
   margin-bottom: 1rem;
-  color: #545560;
+  color: #55565b;
 }
 
 .site-name,
diff --git a/core/themes/claro/css/theme/maintenance-page.pcss.css b/core/themes/claro/css/theme/maintenance-page.pcss.css
index 1d7c97bb829f..9cffc0dc5824 100644
--- a/core/themes/claro/css/theme/maintenance-page.pcss.css
+++ b/core/themes/claro/css/theme/maintenance-page.pcss.css
@@ -7,13 +7,13 @@
 
 .maintenance-page {
   min-height: 100%;
-  background-color: var(--color-lightdiamond);
+  background-color: var(--color-gray-100);
 }
 
 .site-name {
   margin-top: var(--space-m);
   word-wrap: break-word;
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
   font-size: var(--font-size-h4);
 }
 
@@ -24,7 +24,7 @@
 
 .content {
   margin-bottom: var(--space-m);
-  color: var(--color-davysgray);
+  color: var(--color-gray-800);
 }
 
 .site-name,
diff --git a/core/themes/claro/css/theme/media-library.css b/core/themes/claro/css/theme/media-library.css
index bd9818ebead6..f48499892138 100644
--- a/core/themes/claro/css/theme/media-library.css
+++ b/core/themes/claro/css/theme/media-library.css
@@ -39,7 +39,7 @@
   margin: 0;
   padding-top: 0.5rem;
   list-style: none;
-  color: #222330;
+  color: #232429;
 }
 
 [dir="rtl"] .media-library-menu {
@@ -63,7 +63,7 @@
   width: 100%;
   margin-top: -1px;
   content: "";
-  border-top: 1px solid #d4d4d8;
+  border-top: 1px solid #d3d4d9;
 }
 
 .media-library-menu__link {
@@ -76,7 +76,7 @@
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
-  color: #222330;
+  color: #232429;
   border: 1px solid transparent;
   border-width: 1px 0 1px 4px; /* LTR */
   border-radius: 2px 0 0 2px; /* LTR */
@@ -107,8 +107,8 @@
   text-decoration: none;
   color: #003cc5;
   /* These borders are necessary to replace the dividing lines while in the hover state. */
-  border-top: 1px solid #d4d4d8;
-  border-bottom: 1px solid #d4d4d8;
+  border-top: 1px solid #d3d4d9;
+  border-bottom: 1px solid #d3d4d9;
   background: #f0f5fd;
 }
 
@@ -803,7 +803,7 @@
 
 .media-library-item__edit {
   /* !important to override button class border. */
-  border: 1px solid #d4d4d8 !important;
+  border: 1px solid #d3d4d9 !important;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg fill='%23545560'%3e%3cpath d='M14.545 3.042l-1.586-1.585a1.003 1.003 0 00-1.414 0L10.252 2.75l3 3 1.293-1.293a1.004 1.004 0 000-1.415zM5.25 13.751l-3-3 6.998-6.998 3 3zM.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z'/%3e%3c/g%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: center;
@@ -822,7 +822,7 @@
 .media-library-item__remove.button:hover,
 .media-library-item__remove.button:focus {
   /* !important to override button class border. */
-  border: 1px solid #d4d4d8 !important;
+  border: 1px solid #d3d4d9 !important;
   background-image: url("data:image/svg+xml,%3csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.344 2.343l11.313 11.313M2.344 13.657L13.657 2.343' stroke='%2355565B' stroke-width='3'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: center;
diff --git a/core/themes/claro/css/theme/media-library.pcss.css b/core/themes/claro/css/theme/media-library.pcss.css
index 8a88faf08a62..6db92daad1d8 100644
--- a/core/themes/claro/css/theme/media-library.pcss.css
+++ b/core/themes/claro/css/theme/media-library.pcss.css
@@ -750,7 +750,7 @@
 
 .media-library-item__edit {
   /* !important to override button class border. */
-  border: 1px solid var(--color-lightgray) !important;
+  border: 1px solid var(--color-gray-200) !important;
   background-image: url("../../images/icons/545560/pencil.svg");
   background-repeat: no-repeat;
   background-position: center;
@@ -767,7 +767,7 @@
 .media-library-item__remove.button:hover,
 .media-library-item__remove.button:focus {
   /* !important to override button class border. */
-  border: 1px solid var(--color-lightgray) !important;
+  border: 1px solid var(--color-gray-200) !important;
   background-image: url("../../../../misc/icons/545560/ex.svg");
   background-repeat: no-repeat;
   background-position: center;
@@ -801,7 +801,7 @@
   justify-content: center;
   width: 220px;
   margin-right: 20px; /* LTR */
-  background: var(--color-whitesmoke-o-40);
+  background: var(--color-gray-050-o-40);
 }
 [dir="rtl"] .media-library-add-form__preview {
   margin-right: 0;
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.css b/core/themes/claro/css/theme/views_ui.admin.theme.css
index 76fd7b7de661..b68bb848f18c 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.css
@@ -292,7 +292,7 @@ td.group-title {
   bottom: -0.8125rem;
   padding: 0.5px 0.375rem;
   text-transform: uppercase;
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
   background: #fff;
   font-weight: bold;
   font-style: italic;
@@ -641,7 +641,7 @@ td.group-title {
 }
 
 .views-ui-rearrange-filter-form tr td[rowspan] {
-  border: 1px solid #d4d4d8;
+  border: 1px solid #d3d4d9;
 }
 
 .views-ui-rearrange-filter-form tr[id^="views-row"] {
@@ -654,7 +654,7 @@ td.group-title {
 }
 
 .views-ui-rearrange-filter-form .draggable td {
-  border-bottom: 0.0625rem solid #d4d4d8;
+  border-bottom: 0.0625rem solid #d3d4d9;
 }
 
 .views-ui-rearrange-filter-form .group-empty {
diff --git a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
index 3c0ff632501d..5c2215eb5fac 100644
--- a/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
+++ b/core/themes/claro/css/theme/views_ui.admin.theme.pcss.css
@@ -233,7 +233,7 @@ td.group-title {
   bottom: -13px;
   padding: 0.5px 6px;
   text-transform: uppercase;
-  border: 1px solid var(--color-lightgray);
+  border: 1px solid var(--color-gray-200);
   background: #fff;
   font-weight: bold;
   font-style: italic;
@@ -252,9 +252,9 @@ td.group-title {
 }
 .views-displays {
   padding-bottom: 36px;
-  border-top: 1px solid var(--color-lightgray-o-80);
-  border-right: 1px solid var(--color-lightgray-o-80);
-  border-left: 1px solid var(--color-lightgray-o-80);
+  border-top: 1px solid var(--color-gray-200-o-80);
+  border-right: 1px solid var(--color-gray-200-o-80);
+  border-left: 1px solid var(--color-gray-200-o-80);
 }
 .views-display-top {
   position: relative;
@@ -262,16 +262,16 @@ td.group-title {
   flex-wrap: wrap;
   justify-content: space-between;
   padding: var(--space-s) var(--space-s) calc(var(--space-s) - 5px);
-  border-bottom: 1px solid var(--color-lightgray-o-80);
-  background-color: var(--color-whitesmoke);
+  border-bottom: 1px solid var(--color-gray-200-o-80);
+  background-color: var(--color-gray-050);
 }
 .form-edit .form-actions {
   margin-top: 0;
   padding: var(--space-s) var(--space-m);
-  border-right: 1px solid var(--color-lightgray-o-80);
-  border-bottom: 1px solid var(--color-lightgray-o-80);
-  border-left: 1px solid var(--color-lightgray-o-80);
-  background-color: var(--color-whitesmoke);
+  border-right: 1px solid var(--color-gray-200-o-80);
+  border-bottom: 1px solid var(--color-gray-200-o-80);
+  border-left: 1px solid var(--color-gray-200-o-80);
+  background-color: var(--color-gray-050);
 }
 .edit-display-settings {
   margin: var(--space-l) var(--space-l) 0 var(--space-l);
@@ -290,7 +290,7 @@ td.group-title {
   padding: 0.125rem 0 0;
 }
 .views-display-column {
-  border: 1px solid var(--color-lightgray-o-80);
+  border: 1px solid var(--color-gray-200-o-80);
   border-radius: var(--base-border-radius);
   box-shadow: var(--details-box-shadow);
 }
@@ -332,7 +332,7 @@ td.group-title {
   margin: 0 0 var(--space-xs);
   padding-top: var(--space-xs);
   padding-bottom: var(--space-xs);
-  border-bottom: 1px solid var(--color-lightgray-o-80);
+  border-bottom: 1px solid var(--color-gray-200-o-80);
   line-height: 20px;
 }
 .views-ui-display-tab-bucket:last-of-type {
@@ -469,7 +469,7 @@ td.group-title {
 .views-ui-dialog .views-offset-top:not(:empty) {
   position: relative;
   padding: var(--space-s) var(--space-m) var(--space-xs);
-  background-color: var(--color-whitesmoke);
+  background-color: var(--color-gray-050);
 }
 .views-ui-dialog .views-offset-top:not(:empty):after {
   position: absolute;
@@ -529,7 +529,7 @@ td.group-title {
   border-collapse: collapse;
 }
 .views-ui-rearrange-filter-form tr td[rowspan] {
-  border: 1px solid var(--color-lightgray);
+  border: 1px solid var(--color-gray-200);
 }
 .views-ui-rearrange-filter-form tr[id^="views-row"] {
   border-right: 1px solid #cdcdcd; /* LTR */
@@ -539,7 +539,7 @@ td.group-title {
   border-left: 1px solid #cdcdcd;
 }
 .views-ui-rearrange-filter-form .draggable td {
-  border-bottom: 0.0625rem solid var(--color-lightgray);
+  border-bottom: 0.0625rem solid var(--color-gray-200);
 }
 .views-ui-rearrange-filter-form .group-empty {
   border-bottom: 1px solid #cdcdcd;
@@ -569,7 +569,7 @@ td.group-title {
   margin-top: 0;
   padding: 8px 12px;
   border-bottom: 1px solid #ccc;
-  background-color: var(--color-whitesmoke);
+  background-color: var(--color-gray-050);
 }
 .view-preview-form .form-item--live-preview {
   position: absolute;
@@ -622,7 +622,7 @@ td.group-title {
   border-color: var(--color-bg);
 }
 .views-query-info table tr {
-  background-color: var(--color-whitesmoke);
+  background-color: var(--color-gray-050);
 }
 .views-query-info table th,
 .views-query-info table td {