Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi:...

Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi: Define Blue scale for Claro

Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi:...
Issue #3251709 by cindytwilliams, andregp, ankithashetty, ckrina, saschaeggi: Define Blue scale for Claro
1b9a758b · ckrina · 05b4b091 · 1b9a758b · 1b9a758b · 1b9a758b
Commit 1b9a758b authored May 10, 2022 by ckrina
--- a/core/themes/claro/css/base/elements.css
+++ b/core/themes/claro/css/base/elements.css
@@ -24,7 +24,7 @@ body {

 a,
 .link {
-  color: #003cc5;
+  color: #003ecc;
 }

 a:hover,
@@ -42,7 +42,7 @@ a:hover,

 a:active,
 .link:active {
-  color: #00339a;
+  color: #002e9a;
 }

 hr {
@@ -144,7 +144,7 @@ blockquote::before {
  position: absolute;
  left: -2.5rem; /* LTR */
  content: open-quote;
-  color: #003cc5;
+  color: #003ecc;
  font-family: "Times New Roman", times, serif;
  font-size: 3rem;
  line-height: 1em;

--- a/core/themes/claro/css/base/off-canvas.theme.css
+++ b/core/themes/claro/css/base/off-canvas.theme.css
@@ -79,7 +79,7 @@
 }

 #drupal-off-canvas .ui-widget-content a {
-  color: #85bef4;
+  color: #99b8ff;
 }

 #drupal-off-canvas .form-actions {

--- a/core/themes/claro/css/base/off-canvas.theme.pcss.css
+++ b/core/themes/claro/css/base/off-canvas.theme.pcss.css
@@ -67,7 +67,7 @@
  font-weight: normal;
 }
 #drupal-off-canvas .ui-widget-content a {
-  color: #85bef4;
+  color: var(--color-blue-200);
 }

 #drupal-off-canvas .form-actions {

--- a/core/themes/claro/css/base/variables.css
+++ b/core/themes/claro/css/base/variables.css
@@ -9,8 +9,9 @@
   * Color Palette.
   */
  /* Secondary. */
-  /* 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. */
+  /* Variations. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */ /* 2% darker than base. */ /* 5% darker than base. */ /* 5% darker than base. */ /* 10% darker than base. */
  /* Gray variations. */
+  /* Blue variations. */
  /*
   * Base.
   */
@@ -28,7 +29,7 @@
   */
  /*
   * Inputs.
-   */ /* Absolute zero with opacity. */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
+   */ /* Davy's gray with 0.6 opacity. */ /* Light gray with 0.3 opacity on white bg. */ /* Old silver with 0.5 opacity on white bg. */ /* (1/8)em ~ 2px */ /* (1/16)em ~ 1px */ /* Font size is too big to use 1rem for extrasmall line-height */ /* 7px inside the form element label. */ /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */

--- a/core/themes/claro/css/base/variables.pcss.css
+++ b/core/themes/claro/css/base/variables.pcss.css
@@ -2,7 +2,7 @@
  /*
   * Color Palette.
   */
-  --color-absolutezero: #003cc5;
+  --color-absolutezero: var(--color-blue-600);
  --color-white: #fff;
  --color-text: var(--color-gray);
  --color-text-light: var(--color-gray-500);
@@ -15,12 +15,12 @@
  --color-lightninggreen: #26a769;
  --color-focus: var(--color-lightninggreen);
  /* Variations. */
-  --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
-  --color-absolutezero-active: #00339a; /* 20% darker than base. */
+  --color-absolutezero-hover: var(--color-blue-650); /* 5% darker than base. */
+  --color-absolutezero-active: var(--color-blue-700); /* 10% darker than base. */
  --color-maximumred-hover: #c11f1f; /* 5% darker than base. */
  --color-maximumred-active: #ab1b1b; /* 10% darker than base. */
-  --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
-  --color-bgblue-active: #e6ecf8; /* 10% darker than base. */
+  --color-bgblue-hover: var(--color-blue-020); /* 2% darker than base. */
+  --color-bgblue-active: var(--color-blue-050); /* 5% darker than base. */
  --color-bgred-hover: #fdf5f5; /* 5% darker than base. */
  --color-bgred-active: #fceded; /* 10% darker than base. */
  /* Gray variations. */
@@ -36,6 +36,21 @@
  --color-gray-100: #dedfe4;
  --color-gray-050: #f3f4f9;
  --color-gray-025: #f9faff;
+  /* Blue variations. */
+  --color-blue: var(--color-blue-600);
+  --color-blue-900: #000f33;
+  --color-blue-800: #001f66;
+  --color-blue-700: #002e9a;
+  --color-blue-650: #0036b1;
+  --color-blue-600: #003ecc;
+  --color-blue-500: #004eff;
+  --color-blue-400: #3371ff;
+  --color-blue-300: #6694ff;
+  --color-blue-200: #99b8ff;
+  --color-blue-100: #ccdbff;
+  --color-blue-070: #f3f4f9;
+  --color-blue-050: #e5edff;
+  --color-blue-020: #f5f8ff;
  /*
   * Base.
   */
@@ -98,7 +113,6 @@
  --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. */
@@ -143,7 +157,7 @@
  /**
   * Buttons.
   */
-  --button--focus-border-color: #5a8bed;
+  --button--focus-border-color: var(--color-blue-300);
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-text);
  --button-bg-color: var(--color-gray-200);

--- a/core/themes/claro/css/components/action-link.css
+++ b/core/themes/claro/css/components/action-link.css
@@ -117,7 +117,7 @@
 .action-link:hover {
  text-decoration: none;
  color: #0036b1;
-  background-color: #f0f5fd;
+  background-color: #f5f8ff;
 }

 .action-link:focus {
@@ -127,8 +127,8 @@
 }

 .action-link:active {
-  color: #00339a;
-  background-color: #e6ecf8;
+  color: #002e9a;
+  background-color: #e5edff;
 }

 /**
@@ -220,7 +220,7 @@
 }

 .action-link--icon-plus:active::before {
-  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%2300309e' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3 8h10M8 3v10'/%3e%3c/svg%3e");
 }

 /* Plus — danger */
@@ -265,7 +265,7 @@
 }

 .action-link--icon-trash:active::before {
-  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%2300309E' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg height='16' width='16' fill='%23002E9A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M14.9 2.9c-.1-.4-.2-.6-.2-.6-.1-.4-.4-.4-.8-.5l-2.3-.3c-.3 0-.3 0-.4-.3-.4-.7-.5-1.2-.9-1.2H5.7c-.4 0-.5.5-.9 1.3-.1.2-.1.2-.4.3l-2.3.3c-.4 0-.7.1-.8.4 0 0-.1.2-.2.5-.1.6-.2.5.3.5h13.2c.5 0 .4.1.3-.4zm-1.5 1.8H2.6c-.7 0-.8.1-.7.6l.8 10.1c.1.5.1.6.8.6h9.1c.6 0 .7-.1.8-.6l.8-10.1c0-.5-.1-.6-.8-.6z'/%3e%3c/svg%3e");
 }

 /* Trash — danger */
@@ -310,7 +310,7 @@
 }

 .action-link--icon-ex:active::before {
-  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%2300309e' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg height='16' stroke='%23002E9A' stroke-width='1.5' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 3L3 13M13 13L3 3'/%3e%3c/svg%3e");
 }

 /* Ex — danger */
@@ -355,7 +355,7 @@
 }

 .action-link--icon-checkmark:active::before {
-  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%2300309E' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg fill='none' height='16' stroke='%23002E9A' stroke-width='2' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2 8.571L5.6 12 14 4'/%3e%3c/svg%3e");
 }

 /* Checkmark — danger */
@@ -400,7 +400,7 @@
 }

 .action-link--icon-cog:active::before {
-  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%2300309e' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.426 9.249a7.29 7.29 0 00.076-.998c0-.36-.035-.71-.086-1.056l-2.275-.293a5.039 5.039 0 00-.498-1.201l1.396-1.808a7.3 7.3 0 00-1.459-1.452l-1.807 1.391a5.058 5.058 0 00-1.2-.499l-.292-2.252C8.943 1.033 8.604 1 8.252 1s-.694.033-1.032.082l-.291 2.251a5.076 5.076 0 00-1.2.499L3.924 2.441a7.3 7.3 0 00-1.459 1.452L3.86 5.701a5.076 5.076 0 00-.499 1.2l-2.276.294A7.35 7.35 0 001 8.251c0 .34.031.671.077.998l2.285.295c.115.426.284.826.499 1.2L2.444 12.58c.411.55.896 1.038 1.443 1.452l1.842-1.42c.374.215.774.383 1.2.498l.298 2.311c.337.047.677.08 1.025.08s.688-.033 1.021-.08l.299-2.311a5.056 5.056 0 001.201-.498l1.842 1.42a7.326 7.326 0 001.443-1.452l-1.416-1.837c.215-.373.383-.773.498-1.199zm-7.174 1.514a2.54 2.54 0 110-5.082 2.542 2.542 0 010 5.082z'/%3e%3c/svg%3e");
 }

 /* Cog — danger */
@@ -445,7 +445,7 @@
 }

 .action-link--icon-show:active::before {
-  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%2300309E' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 3C4.364 3 1.258 5.073 0 8c1.258 2.927 4.364 5 8 5s6.742-2.073 8-5c-1.258-2.927-4.364-5-8-5zm0 8a3 3 0 100-6 3 3 0 000 6z'/%3e%3c/svg%3e");
 }

 /* Show - danger */
@@ -490,7 +490,7 @@
 }

 .action-link--icon-hide:active::before {
-  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%2300309E' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg fill-rule='evenodd' height='16' fill='%23002E9A' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.01 1.696L2 1.707 14.072 13.78l-.696.697-2.078-2.078A9.232 9.232 0 018 13c-3.636 0-6.742-2.073-8-5 .647-1.505 1.783-2.784 3.228-3.672L1 2.1l.707-.707zM5 8c0-.546.146-1.058.4-1.5l4.1 4.1A3 3 0 015 8zM5.151 3.444l1.76 1.76a3 3 0 013.885 3.885l2.344 2.344C14.41 10.561 15.41 9.375 16 8c-1.258-2.927-4.364-5-8-5-.999 0-1.958.156-2.849.444z'/%3e%3c/svg%3e");
 }

 /* Hide - danger */
@@ -535,7 +535,7 @@
 }

 .action-link--icon-key:active::before {
-  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%2300309e'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.727 6.714A4.239 4.239 0 008.9 5.896L3.001 0H0v2h1v1.618L1.378 4H3v1h1v1.622h1.622l.864.862L5.5 8.5l.992.99a4.227 4.227 0 001.223 3.234 4.264 4.264 0 006.012 0 4.253 4.253 0 000-6.01zm-.829 5.182a1.653 1.653 0 11-2.338-2.338 1.653 1.653 0 112.338 2.338z' fill='%23002E9A'/%3e%3c/svg%3e");
 }

 /* Key — danger */
@@ -580,7 +580,7 @@
 }

 .action-link--icon-questionmark:active::before {
-  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%2300309e'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg width='15' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.002 0a7 7 0 100 14 7 7 0 000-14zm3 5c0 .551-.16 1.085-.477 1.586l-.158.22c-.07.093-.189.241-.361.393a9.67 9.67 0 01-.545.447l-.203.189-.141.129-.096.17L8 8.369v.63H5.999v-.704c.026-.396.078-.73.204-.999a2.83 2.83 0 01.439-.688l.225-.21-.01-.015.176-.14.137-.128c.186-.139.357-.277.516-.417l.148-.18A.948.948 0 008.002 5 1.001 1.001 0 006 5H4a3 3 0 016.002 0zm-1.75 6.619a.627.627 0 01-.625.625h-1.25a.627.627 0 01-.626-.625v-1.238c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625v1.238z' fill='%23002E9A'/%3e%3c/svg%3e");
 }

 /* Question Mark - danger */

--- a/core/themes/claro/css/components/action-link.pcss.css
+++ b/core/themes/claro/css/components/action-link.pcss.css
@@ -191,7 +191,7 @@
  background-image: url(../../images/icons/0036b1/plus.svg);
 }
 .action-link--icon-plus:active::before {
-  background-image: url(../../images/icons/00309e/plus.svg);
+  background-image: url(../../images/icons/002e9a/plus.svg);
 }

 /* Plus — danger */
@@ -228,7 +228,7 @@
  background-image: url(../../images/icons/0036b1/trash.svg);
 }
 .action-link--icon-trash:active::before {
-  background-image: url(../../images/icons/00309e/trash.svg);
+  background-image: url(../../images/icons/002e9a/trash.svg);
 }

 /* Trash — danger */
@@ -265,7 +265,7 @@
  background-image: url(../../images/icons/0036b1/ex.svg);
 }
 .action-link--icon-ex:active::before {
-  background-image: url(../../images/icons/00309e/ex.svg);
+  background-image: url(../../images/icons/002e9a/ex.svg);
 }

 /* Ex — danger */
@@ -302,7 +302,7 @@
  background-image: url(../../images/icons/0036b1/checkmark.svg);
 }
 .action-link--icon-checkmark:active::before {
-  background-image: url(../../images/icons/00309e/checkmark.svg);
+  background-image: url(../../images/icons/002e9a/checkmark.svg);
 }

 /* Checkmark — danger */
@@ -339,7 +339,7 @@
  background-image: url(../../images/icons/0036b1/cog.svg);
 }
 .action-link--icon-cog:active::before {
-  background-image: url(../../images/icons/00309e/cog.svg);
+  background-image: url(../../images/icons/002e9a/cog.svg);
 }

 /* Cog — danger */
@@ -376,7 +376,7 @@
  background-image: url(../../images/icons/0036b1/show.svg);
 }
 .action-link--icon-show:active::before {
-  background-image: url(../../images/icons/00309e/show.svg);
+  background-image: url(../../images/icons/002e9a/show.svg);
 }

 /* Show - danger */
@@ -413,7 +413,7 @@
  background-image: url(../../images/icons/0036b1/hide.svg);
 }
 .action-link--icon-hide:active::before {
-  background-image: url(../../images/icons/00309e/hide.svg);
+  background-image: url(../../images/icons/002e9a/hide.svg);
 }

 /* Hide - danger */
@@ -450,7 +450,7 @@
  background-image: url("../../images/icons/0036b1/key.svg");
 }
 .action-link--icon-key:active::before {
-  background-image: url("../../images/icons/00309e/key.svg");
+  background-image: url("../../images/icons/002e9a/key.svg");
 }

 /* Key — danger */
@@ -487,7 +487,7 @@
  background-image: url("../../images/icons/0036b1/questionmark.svg");
 }
 .action-link--icon-questionmark:active::before {
-  background-image: url("../../images/icons/00309e/questionmark.svg");
+  background-image: url("../../images/icons/002e9a/questionmark.svg");
 }

 /* Question Mark - danger */

--- a/core/themes/claro/css/components/ajax-progress.module.css
+++ b/core/themes/claro/css/components/ajax-progress.module.css
@@ -72,7 +72,7 @@
  width: 1.125rem;
  height: 1.125rem;
  animation: claro-throbber 0.75s linear infinite;
-  border: 2px solid #003cc5;
+  border: 2px solid #003ecc;
  border-right: 2px dotted transparent;
  border-radius: 50%;
 }
@@ -117,7 +117,7 @@
  height: 1.75rem; /* 28px */
  margin: -0.875rem;
  content: "";
-  border: 3px solid #003cc5;
+  border: 3px solid #003ecc;
  border-right: 3px dotted transparent;
 }


--- a/core/themes/claro/css/components/autocomplete-loading.module.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.css
@@ -47,11 +47,11 @@
 }

 .js .form-autocomplete.is-autocompleting {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
 }

 .js[dir="rtl"] .form-autocomplete.is-autocompleting {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23004adc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' height='20' width='40'%3e%3cstyle%3e%40keyframes s%7b0%25%7btransform:rotate(0deg) translate(-50%25,-50%25)%7d50%25%7btransform:rotate(-430deg) translate(-50%25,-50%25);stroke-dashoffset:20%7dto%7btransform:rotate(-720deg) translate(-50%25,-50%25)%7d%7d%3c/style%3e%3ccircle fill='none' cy='5' cx='5' stroke='%23003ecc' stroke-dashoffset='6.125' stroke-dasharray='25' style='animation:s 1s linear infinite' r='4'/%3e%3c/svg%3e");
 }

 /* IE11 does not animate inline SVG. */
@@ -87,7 +87,7 @@ _:-ms-fullscreen,
  bottom: 100%;
  max-width: 100%;
  margin-bottom: 0.15rem;
-  color: #003cc5;
+  color: #003ecc;
  font-size: 0.702rem; /* ~11px */
  font-weight: bold;
  line-height: 1.125rem; /* 18px */

--- a/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
+++ b/core/themes/claro/css/components/autocomplete-loading.module.pcss.css
@@ -39,10 +39,10 @@
  background-position: 0 50%;
 }
 .js .form-autocomplete.is-autocompleting {
-  background-image: url(../../images/icons/004adc/spinner.svg);
+  background-image: url(../../images/icons/003ecc/spinner.svg);
 }
 .js[dir="rtl"] .form-autocomplete.is-autocompleting {
-  background-image: url(../../images/icons/004adc/spinner-rtl.svg);
+  background-image: url(../../images/icons/003ecc/spinner-rtl.svg);
 }
 /* IE11 does not animate inline SVG. */
 /* stylelint-disable-next-line selector-type-no-unknown */

--- a/core/themes/claro/css/components/button.css
+++ b/core/themes/claro/css/components/button.css
@@ -126,7 +126,7 @@ a.button:active {

 .button--primary {
  color: #fff;
-  background-color: #003cc5;
+  background-color: #003ecc;
 }

 .button--primary:hover {
@@ -135,7 +135,7 @@ a.button:active {
 }

 .button--primary:active {
-  background-color: #00339a;
+  background-color: #002e9a;
 }

 a.button--primary:hover,

--- a/core/themes/claro/css/components/details.css
+++ b/core/themes/claro/css/components/details.css
@@ -265,7 +265,7 @@
 [open] .claro-details__summary--accordion,
 [open] .claro-details__summary--accordion-item,
 [open] .claro-details__summary--vertical-tabs-item {
-  color: #003cc5;
+  color: #003ecc;
 }

 .claro-details__summary:hover::before,
@@ -307,8 +307,8 @@
 }

 .claro-details__summary:hover {
-  color: #003cc5;
-  background-color: #f0f5fd;
+  color: #003ecc;
+  background-color: #f5f8ff;
 }

 /**
@@ -327,7 +327,7 @@
 [open] > .claro-details__summary--vertical-tabs-item:not(:focus):not(:active)::after,
 .collapse-processed[open] > .claro-details__summary--vertical-tabs-item .details-title:not(:focus)::after {
  opacity: 1;
-  border: 3px solid #003cc5;
+  border: 3px solid #003ecc;
  border-width: 0 0 0 3px; /* LTR */
  box-shadow: none;
 }
@@ -362,7 +362,7 @@
 }

 .claro-details[open] > .claro-details__summary:focus {
-  color: #003cc5;
+  color: #003ecc;
 }

 /**

--- a/core/themes/claro/css/components/dropbutton.css
+++ b/core/themes/claro/css/components/dropbutton.css
@@ -143,7 +143,7 @@
  height: 0.5625rem;
  content: "";
  transform: translate(50%, -50%) rotate(0);
-  background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23222330'/%3e%3c/svg%3e") no-repeat center;
+  background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23000f33'/%3e%3c/svg%3e") no-repeat center;
  background-size: contain;
 }


--- a/core/themes/claro/css/components/dropbutton.pcss.css
+++ b/core/themes/claro/css/components/dropbutton.pcss.css
@@ -142,7 +142,7 @@
  height: 0.5625rem;
  content: "";
  transform: translate(50%, -50%) rotate(0);
-  background: url(../../images/icons/222330/chevron-down.svg) no-repeat center;
+  background: url(../../images/icons/000f33/chevron-down.svg) no-repeat center;
  background-size: contain;
 }


--- a/core/themes/claro/css/components/form--checkbox-radio--ie.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.css
@@ -48,8 +48,8 @@

 .form-boolean--type-checkbox:checked::-ms-check {
  color: transparent; /* IE */
-  border-color: #003cc5;
-  background-color: #003cc5;
+  border-color: #003ecc;
+  background-color: #003ecc;
  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
 }

@@ -61,9 +61,9 @@

 .form-boolean--type-radio:checked::-ms-check {
  color: transparent; /* IE */
-  border-color: #003cc5;
-  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='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  border-color: #003ecc;
+  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='%23003ecc'/%3e%3c/svg%3e");
+  box-shadow: inset 0 0 0 1px #003ecc;
 }

 .form-boolean--type-checkbox:checked:active::-ms-check,
@@ -73,19 +73,19 @@
 }

 .form-boolean--type-radio:checked::-ms-check {
-  border-color: #003cc5;
-  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='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  border-color: #003ecc;
+  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='%23003ecc'/%3e%3c/svg%3e");
+  box-shadow: inset 0 0 0 1px #003ecc;
 }

 .form-boolean--type-radio:checked:focus::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
 }

 .form-boolean--type-radio:checked:active::-ms-check,
 .form-boolean--type-radio:checked:hover::-ms-check {
  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");
+  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='%23000f33'/%3e%3c/svg%3e");
  box-shadow: inset 0 0 0 1px #232429;
 }


--- a/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css
+++ b/core/themes/claro/css/components/form--checkbox-radio--ie.pcss.css
@@ -50,7 +50,7 @@
 .form-boolean--type-radio:checked::-ms-check {
  color: transparent; /* IE */
  border-color: var(--input--focus-border-color);
-  background-image: url(../../images/icons/004adc/circle.svg);
+  background-image: url(../../images/icons/003ecc/circle.svg);
  box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
 }
 .form-boolean--type-checkbox:checked:active::-ms-check,
@@ -60,7 +60,7 @@
 }
 .form-boolean--type-radio:checked::-ms-check {
  border-color: var(--input--focus-border-color);
-  background-image: url(../../images/icons/004adc/circle.svg);
+  background-image: url(../../images/icons/003ecc/circle.svg);
  box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
 }
 .form-boolean--type-radio:checked:focus::-ms-check {
@@ -69,7 +69,7 @@
 .form-boolean--type-radio:checked:active::-ms-check,
 .form-boolean--type-radio:checked:hover::-ms-check {
  border-color: var(--input-fg-color);
-  background-image: url(../../images/icons/222330/circle.svg);
+  background-image: url(../../images/icons/000f33/circle.svg);
  box-shadow: inset 0 0 0 1px var(--input-fg-color);
 }
 .form-boolean--type-radio:checked:focus:active::-ms-check,

--- a/core/themes/claro/css/components/form--checkbox-radio.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.css
@@ -113,8 +113,8 @@
 }

 .form-boolean--type-checkbox:checked {
-  border-color: #003cc5;
-  background-color: #003cc5;
+  border-color: #003ecc;
+  background-color: #003ecc;
  background-image: url("data:image/svg+xml,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M3.795 7.096l2.387 2.506 6.023-6.327 1.484 1.56-7.507 7.89L2.31 8.656z' fill='%23fff'/%3e%3c/svg%3e");
 }

@@ -125,19 +125,19 @@
 }

 .form-boolean--type-radio:checked {
-  border-color: #003cc5;
-  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='%23004adc'/%3e%3c/svg%3e");
-  box-shadow: inset 0 0 0 1px #003cc5;
+  border-color: #003ecc;
+  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='%23003ecc'/%3e%3c/svg%3e");
+  box-shadow: inset 0 0 0 1px #003ecc;
 }

 .form-boolean--type-radio:checked:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003cc5;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #003ecc;
 }

 .form-boolean--type-radio:checked:active,
 .form-boolean--type-radio:checked:hover {
  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");
+  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='%23000f33'/%3e%3c/svg%3e");
  box-shadow: inset 0 0 0 1px #232429;
 }


--- a/core/themes/claro/css/components/form--checkbox-radio.pcss.css
+++ b/core/themes/claro/css/components/form--checkbox-radio.pcss.css
@@ -106,7 +106,7 @@
 }
 .form-boolean--type-radio:checked {
  border-color: var(--input--focus-border-color);
-  background-image: url(../../images/icons/004adc/circle.svg);
+  background-image: url(../../images/icons/003ecc/circle.svg);
  box-shadow: inset 0 0 0 1px var(--input--focus-border-color);
 }
 .form-boolean--type-radio:checked:focus {
@@ -115,7 +115,7 @@
 .form-boolean--type-radio:checked:active,
 .form-boolean--type-radio:checked:hover {
  border-color: var(--input-fg-color);
-  background-image: url(../../images/icons/222330/circle.svg);
+  background-image: url(../../images/icons/000f33/circle.svg);
  box-shadow: inset 0 0 0 1px var(--input-fg-color);
 }
 .form-boolean--type-radio:checked:focus:active,

--- a/core/themes/claro/css/components/form--select.css
+++ b/core/themes/claro/css/components/form--select.css
@@ -45,7 +45,7 @@
 */

 .form-element--type-select:focus {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23004adc'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3e%3cpath fill='none' stroke-width='1.5' d='M1 1l6 6 6-6' stroke='%23003ecc'/%3e%3c/svg%3e");
 }

 .form-element--type-select[disabled] {

--- a/core/themes/claro/css/components/form--select.pcss.css
+++ b/core/themes/claro/css/components/form--select.pcss.css
@@ -38,7 +38,7 @@
 * Select states.
 */
 .form-element--type-select:focus {
-  background-image: url(../../images/icons/004adc/chevron-down.svg);
+  background-image: url(../../images/icons/003ecc/chevron-down.svg);
 }
 .form-element--type-select[disabled] {
  background-image: url(../../images/icons/8e929c/chevron-down.svg);