Verified Commit 20d4f846 authored by Alex Pott's avatar Alex Pott
Browse files

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

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

(cherry picked from commit 304c695a)
parent a92ee9af

core/misc/icons/dc2323/error.svg

0 → 100644
+1 −0
Original line number Diff line number Diff line 
<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

+1 −0
Original line number Diff line number Diff line
@@ -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

+18 −3
Original line number Diff line number Diff line
@@ -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

+3 −3
Original line number Diff line number Diff line
@@ -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

+3 −3
Original line number Diff line number Diff line
@@ -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,