Issue #3270842 by javi-er, sharayurajput, ckrina, WagnerMelo, saschaeggi:...

Issue #3270842 by javi-er, sharayurajput, ckrina, WagnerMelo, saschaeggi: Define Red color scale for Claro

core/misc/icons/dc2323/error.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#dc2323"><path d="M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z"/></svg>
\ No newline at end of file

core/themes/claro/css/base/variables.css

@@ -12,6 +12,7 @@
   /* 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. */
+  /* Red variations. */
   /*
    * Base.
    */

core/themes/claro/css/base/variables.pcss.css

@@ -9,7 +9,7 @@
   --color-gray-050-o-40: rgba(243, 244, 249, 0.4);
   /* Secondary. */
   --color-gray-200-o-80: rgba(212, 212, 218, 0.8);
-  --color-maximumred: #d72222;
+  --color-maximumred: var(--color-red-500);
   --color-sunglow: #ffd23f;
   --color-sunglow-shaded: #977405;
   --color-lightninggreen: #26a769;
@@ -17,8 +17,8 @@
   /* Variations. */
   --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-maximumred-hover: var(--color-red-550); /* 5% darker than base. */
+  --color-maximumred-active: var(--color-red-600); /* 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. */
@@ -51,6 +51,21 @@
   --color-blue-070: #f3f4f9;
   --color-blue-050: #e5edff;
   --color-blue-020: #f5f8ff;
+  /* Red variations. */
+  --color-red: var(--color-red-500);
+  --color-red-900: #2c0707;
+  --color-red-800: #580e0e;
+  --color-red-700: #841515;
+  --color-red-600: #b01c1c;
+  --color-red-550: #c61f1f;
+  --color-red-500: #dc2323;
+  --color-red-400: #e34f4f;
+  --color-red-300: #ea7b7b;
+  --color-red-200: #f1a7a7;
+  --color-red-100: #f8d3d3;
+  --color-red-070: #fae0e0;
+  --color-red-050: #fce9e9;
+  --color-red-020: #fdf5f5;
   /*
    * Base.
    */

core/themes/claro/css/components/action-link.css

@@ -138,16 +138,16 @@
 /* Danger. */
 
 .action-link--danger {
-  color: #d72222;
+  color: #dc2323;
 }
 
 .action-link--danger:hover {
-  color: #c11f1f;
+  color: #c61f1f;
   background-color: #fdf5f5;
 }
 
 .action-link--danger:active {
-  color: #ab1b1b;
+  color: #b01c1c;
   background-color: #fceded;
 }
 

core/themes/claro/css/components/button.css

@@ -147,16 +147,16 @@ a.button--primary:active {
 
 .button--danger {
   color: #fff;
-  background-color: #d72222;
+  background-color: #dc2323;
 }
 
 .button--danger:hover {
   color: #fff;
-  background-color: #c11f1f;
+  background-color: #c61f1f;
 }
 
 .button--danger:active {
-  background-color: #ab1b1b;
+  background-color: #b01c1c;
 }
 
 a.button--danger:hover,

core/themes/claro/css/components/fieldset.css

@@ -99,7 +99,7 @@ _:-ms-fullscreen,
 }
 
 .fieldset__label.has-error {
-  color: #d72222;
+  color: #dc2323;
 }
 
 .fieldset__description {
@@ -119,7 +119,7 @@ _:-ms-fullscreen,
 .fieldset__error-message {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #d72222;
+  color: #dc2323;
   font-size: 0.79rem; /* ~13px */
   font-weight: normal;
   line-height: 1.0625rem; /* 17px */

core/themes/claro/css/components/form--checkbox-radio--ie.css

@@ -99,32 +99,32 @@
  */
 
 .form-boolean.error::-ms-check {
-  border-color: #d72222;
+  border-color: #dc2323;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:active::-ms-check,
 .form-boolean.error:hover::-ms-check {
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:focus::-ms-check,
 .form-boolean.error:focus:active::-ms-check,
 .form-boolean.error:focus:hover::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:checked:active::-ms-check,
 .form-boolean.error:checked:hover::-ms-check {
-  border-color: #d72222;
+  border-color: #dc2323;
   background-color: #fff;
 }
 
 .form-boolean--type-checkbox.error:checked::-ms-check,
 .form-boolean--type-checkbox.error:checked:active::-ms-check,
 .form-boolean--type-checkbox.error:checked:hover::-ms-check {
-  background-color: #d72222;
+  background-color: #dc2323;
 }
 
 .form-boolean--type-radio.error:checked::-ms-check,
@@ -134,7 +134,7 @@
 }
 
 .form-boolean--type-radio.error:checked:focus::-ms-check {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
 }
 
 /**

core/themes/claro/css/components/form--checkbox-radio.css

@@ -151,32 +151,32 @@
  */
 
 .form-boolean.error {
-  border-color: #d72222;
+  border-color: #dc2323;
   background-color: #fff;
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:active,
 .form-boolean.error:hover {
-  box-shadow: inset 0 0 0 1px #d72222;
+  box-shadow: inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:focus,
 .form-boolean.error:focus:active,
 .form-boolean.error:focus:hover {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
 }
 
 .form-boolean.error:checked:active,
 .form-boolean.error:checked:hover {
-  border-color: #d72222;
+  border-color: #dc2323;
   background-color: #fff;
 }
 
 .form-boolean--type-checkbox.error:checked,
 .form-boolean--type-checkbox.error:checked:active,
 .form-boolean--type-checkbox.error:checked:hover {
-  background-color: #d72222;
+  background-color: #dc2323;
 }
 
 .form-boolean--type-radio.error:checked,
@@ -186,7 +186,7 @@
 }
 
 .form-boolean--type-radio.error:checked:focus {
-  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #d72222;
+  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #26a769, inset 0 0 0 1px #dc2323;
 }
 
 /**

core/themes/claro/css/components/form--password-confirm.css

@@ -126,8 +126,8 @@
 /* Password strength states */
 
 .password-strength__bar.is-weak {
-  border-color: #d72222;
-  background-color: #d72222;
+  border-color: #dc2323;
+  background-color: #dc2323;
 }
 
 .password-strength__bar.is-fair {

core/themes/claro/css/components/form--text.css

@@ -121,7 +121,7 @@ _:-ms-fullscreen,
 
 .form-element.error {
   border-width: 2px;
-  border-color: #d72222;
+  border-color: #dc2323;
 }
 
 .form-element.error:hover {
@@ -133,7 +133,7 @@ _:-ms-fullscreen,
 }
 
 .form-element--type-textarea.error + .cke {
-  border-color: #d72222;
+  border-color: #dc2323;
 }
 
 .form-element[disabled] {
@@ -165,5 +165,5 @@ _:-ms-fullscreen,
 }
 
 .form-element--type-textarea.error + .ck-editor > .ck-editor__main {
-  border: 2px solid #d72222;
+  border: 2px solid #dc2323;
 }

core/themes/claro/css/components/form.css

@@ -80,7 +80,7 @@ tr .form-item,
 /* Label states. */
 
 .form-item__label.has-error {
-  color: #d72222;
+  color: #dc2323;
 }
 
 .form-item__label.option.has-error {
@@ -98,7 +98,7 @@ tr .form-item,
   margin-right: 0.15em;
   margin-left: 0.15em;
   content: "*";
-  color: #d72222;
+  color: #dc2323;
   font-size: 0.875rem;
 }
 
@@ -127,7 +127,7 @@ tr .form-item,
 .form-item__error-message {
   margin-top: 0.375rem; /* 6px */
   margin-bottom: 0.375rem; /* 6px */
-  color: #d72222;
+  color: #dc2323;
   font-size: 0.79rem; /* ~13px */
   font-weight: normal;
   line-height: 1.0625rem; /* 17px */

core/themes/claro/css/components/system-admin--status-report.css

@@ -59,7 +59,7 @@
 }
 
 .system-status-report__status-icon--error:before {
-  background-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
 }
 
 .system-status-report__status-icon--warning:before {

core/themes/claro/css/components/system-admin--status-report.pcss.css

@@ -50,7 +50,7 @@
   left: auto;
 }
 .system-status-report__status-icon--error:before {
-  background-image: url(../../images/core/e32700/error.svg);
+  background-image: url(../../../../misc/icons/dc2323/error.svg);
 }
 .system-status-report__status-icon--warning:before {
   background-image: url(../../images/core/e29700/warning.svg);

core/themes/claro/css/components/system-status-counter.css

@@ -41,7 +41,7 @@
 }
 
 .system-status-counter__status-icon--error:before {
-  background-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
 }
 
 .system-status-counter__status-icon--warning:before {
@@ -64,8 +64,8 @@
     mask-size: 2.5rem;
   }
   .system-status-counter__status-icon--error:before {
-    -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
-    mask-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
   }
   .system-status-counter__status-icon--warning:before {
     -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='%23e29700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m14.66 12.316-5.316-10.633c-.738-1.476-1.946-1.476-2.685 0l-5.317 10.633c-.738 1.477.008 2.684 1.658 2.684h10.002c1.65 0 2.396-1.207 1.658-2.684zm-7.66-8.316h2.002v5h-2.002zm2.252 8.615c0 .344-.281.625-.625.625h-1.25c-.345 0-.626-.281-.626-.625v-1.239c0-.344.281-.625.626-.625h1.25c.344 0 .625.281.625.625z'/%3e%3c/svg%3e");

core/themes/claro/css/components/system-status-counter.pcss.css

@@ -33,7 +33,7 @@
 }
 
 .system-status-counter__status-icon--error:before {
-  background-image: url(../../images/core/e32700/error.svg);
+  background-image: url(../../../../misc/icons/dc2323/error.svg);
 }
 .system-status-counter__status-icon--warning:before {
   background-image: url(../../images/core/e29700/warning.svg);
@@ -51,7 +51,7 @@
     mask-size: 40px;
   }
   .system-status-counter__status-icon--error:before {
-    mask-image: url(../../images/core/e32700/error.svg);
+    mask-image: url(../../../../misc/icons/dc2323/error.svg);
   }
   .system-status-counter__status-icon--warning:before {
     mask-image: url(../../images/core/e29700/warning.svg);

core/themes/claro/css/components/system-status-report.css

@@ -96,7 +96,7 @@
 
 .system-status-report__status-icon--error .details-title:before,
 .details .system-status-report__status-icon--error:before {
-  background-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
 }
 
 .system-status-report__status-icon--warning .details-title:before,
@@ -118,8 +118,8 @@
   }
   .system-status-report__status-icon--error .details-title:before,
   .details .system-status-report__status-icon--error:before {
-    -webkit-mask-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
-    mask-image: url("data:image/svg+xml,%3csvg fill='%23e32700' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284z'/%3e%3c/svg%3e");
+    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
+    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc2323'%3e%3cpath d='M8.002 1c-3.868 0-7.002 3.134-7.002 7s3.134 7 7.002 7c3.865 0 7-3.134 7-7s-3.135-7-7-7zm4.025 9.284c.062.063.1.149.1.239 0 .091-.037.177-.1.24l-1.262 1.262c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-2.283-2.283-2.286 2.283c-.064.062-.15.1-.24.1s-.176-.036-.24-.1l-1.261-1.262c-.063-.062-.1-.148-.1-.24 0-.088.036-.176.1-.238l2.283-2.285-2.283-2.284c-.063-.064-.1-.15-.1-.24s.036-.176.1-.24l1.262-1.262c.063-.063.149-.1.24-.1.089 0 .176.036.24.1l2.285 2.284 2.283-2.284c.064-.063.15-.1.24-.1s.176.036.24.1l1.262 1.262c.062.063.1.149.1.24 0 .089-.037.176-.1.24l-2.283 2.284 2.283 2.284z'/%3e%3c/svg%3e");
   }
   .system-status-report__status-icon--warning .details-title:before,
   .details .system-status-report__status-icon--warning:before {

core/themes/claro/css/components/system-status-report.pcss.css

@@ -80,7 +80,7 @@
 }
 .system-status-report__status-icon--error .details-title:before,
 .details .system-status-report__status-icon--error:before {
-  background-image: url(../../images/core/e32700/error.svg);
+  background-image: url(../../../../misc/icons/dc2323/error.svg);
 }
 .system-status-report__status-icon--warning .details-title:before,
 .details .system-status-report__status-icon--warning:before {
@@ -98,7 +98,7 @@
   }
   .system-status-report__status-icon--error .details-title:before,
   .details .system-status-report__status-icon--error:before {
-    mask-image: url(../../images/core/e32700/error.svg);
+    mask-image: url(../../../../misc/icons/dc2323/error.svg);
   }
   .system-status-report__status-icon--warning .details-title:before,
   .details .system-status-report__status-icon--warning:before {

core/themes/claro/css/theme/ckeditor-editor.css

@@ -64,7 +64,7 @@
 .error + .cke .cke_contents,
 .error + .cke .cke_top,
 .error + .cke .cke_bottom {
-  border-color: #d72222;
+  border-color: #dc2323;
 }
 /* Disabled. */
 [disabled] + .cke.cke_chrome {