Define Blue scale for Claro

Problem/Motivation

Right now we have 3 blues on the design system, mainly used for the Primary button and the link:

  --color-absolutezero: #003cc5;
  --color-absolutezero-hover: #0036b1; /* 10% darker than base. */
  --color-absolutezero-active: #00339a; /* 20% darker than base. */
  --color-bgblue-hover: #f0f5fd; /* 5% darker than base. */
  --color-bgblue-active: #e6ecf8; /* 10% darker than base. */

So far we don't have other elements that use the blue, but we might have in the future. Also, we're starting to work on #3251278: [META] Designs for dark background layers and its color palette and we might or might not want to use the same blue scale.

Proposed resolution

Use a new Blue scale. Proposal:

The biggest change is the main blue color will be changed to the new one, slightly lighter but still keeping a WCAG compliant contrast: from 8.56 for #003CC5 to 8.2 for #003ECC against white, the most important combination used for the primary button). See several component examples with the new blue:

Other combinations that would still have enough color contrast:

Remaining tasks

• New color scale approval.
• Patch introducing the new color scale.
• Change any blue instances from:
  • --color-absolutezero: #003cc5; to --color-absolutezero: var(--color-blue-600);
  • --color-absolutezero-hover: #0036b1; to --color-absolutezero-hover: var(--color-blue-650)
  • --color-absolutezero-active: #00339a to --color-absolutezero-active: var(--color-blue-700)
  • --color-bgblue-hover: #f0f5fd; to --color-bgblue-hover: var(--color-blue-020)
  • --color-bgblue-active: #e6ecf8; to --color-bgblue-active: var(--color-blue-050)
  • --button--focus-border-color: #5a8bed; to --button--focus-border-color: var(--color-blue-300)
• Accessibility review & approval.

Notes:
1. Any other blue instance, please compare with the color scale and choose the closer blue.
2. This is not intended to refactor the tokens naming: we'll do it as part of #3254529: [PLAN] Drupal CSS Modernization Initiative.

User interface changes

The biggest change is the main blue color will be changed to the new one, slightly lighter but still keeping a WCAG compliant contrast: from 8.56 for #003CC5 to 8.2 for #003ECC against white, the most important combination used for the primary button).

Release notes snippet