Commit 1b9a758b authored by Cristina Chumillas's avatar Cristina Chumillas
Browse files

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

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

core/themes/claro/css/base/elements.css

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

core/themes/claro/css/base/off-canvas.theme.css

+1 −1
Original line number Diff line number Diff line
@@ -79,7 +79,7 @@ 
}



#drupal-off-canvas .ui-widget-content a {

  color: #85bef4;

  color: #99b8ff;

}



#drupal-off-canvas .form-actions {

core/themes/claro/css/base/off-canvas.theme.pcss.css

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

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

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

   */

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

+21 −7
Original line number Diff line number Diff line
@@ -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);