Define Blue scale for Claro

Updating the summary with the light blue colors and some screenshots.

Working on this since it's a blocker for a Claro stable blocker issue.

Here's a proposal for the blue scale. Each shade has been set changing lightness in a hsl-based scale (based on @saschaeggi's feedback) so later on it can be calculated with hsl functions if needed.

And here's a contrast grid to be sure there are enough variants WCAG compliant:

Notes:

• The main blue changes slightly to get closer to a hsl shade (hsl(222, 100%, 40%) instead of hsl(222, 100%, 39%), but it's still WCAG compliant with a 8.2 contrast against white.
• I’m not using 25 or 75, but 20 and 70 because you can’t break hsl lightness into 75.5%

Issue summary update and status change.

Thanks Sascha!!

For the screenshots the code needs to be updated first. Here's the scale we should use:

  /* 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;

It needs to be added into the base/variables.pcss.css file, and update any other blue variations. I've added instructions on the remaining tasks in teh summary on what needs to be done.

Update: Please add screenshots of the resulting work as requested in comment #9.

Updated missing blue instances in the summary.

Thanks both for jumping so fast to work on this :)
I just suggested a few changes to the comments since the scale base points are different now and they describe better what the difference is:

1. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -15,12 +15,12 @@
   +  --color-absolutezero-hover: var(--color-blue-650); /* 10% darker than base. */
   

   With the new color scale this becomes 5% instead of 10%.

2. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -15,12 +15,12 @@
   +  --color-absolutezero-active: var(--color-blue-700); /* 20% darker than base. */
   

   This one becomes 10%.

3. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -15,12 +15,12 @@
   +  --color-bgblue-hover: var(--color-blue-020); /* 5% darker than base. */
   

   This one is 2% darker now.

4. +++ b/core/themes/claro/css/base/variables.pcss.css
   @@ -15,12 +15,12 @@
   +  --color-bgblue-active: var(--color-blue-050); /* 10% darker than base. */
   

   This one is 5% lighter.

Thanks for the changes! I've done a deeper review for several components and I've found a few blue color declarations that still need to be changed:

1. In core/themes/claro/css/components/tabs.pcss.css, the following line needs a new blue color implemented:
--tabs--hover-bg-color: #e6ecf8; to --tabs--hover-bg-color: var(--color-bgblue-active);

2. There's another blue defined and note used anywhere in core/themes/claro/css/base/variables.pcss.css in line 116 that should be deleted:
--input--focus-shadow-color: rgba(0, 74, 220, 0.3); /* Absolute zero with opacity. */

3. Missing hexadecimal blue in core/themes/claro/css/base/off-canvas.theme.pcss.css line 70:
color: #85bef4; should be color: var(--color-blue-200);

4. In core/themes/claro/css/components/jquery.ui/theme.pcss.css line 377 and line 415. It could even become a new variable in variables.pcss.css as a "jQuery.UI theme" section before "jQuery.UI dropdown":
#0072b9 /code> to <code><code> var(--color-blue-600)

5. I'm not sure this is actually needed because I can't find it on the UI, but the closer color for color: #008bcb;in lcore/themes/claro/css/components/views-ui.pcss.css (line 184) would be var(--color-blue-400).

6. In core/themes/claro/css/theme/field-ui.admin.pcss.css line 56:
background: #d5e9f2; should be background: var(--color-blue-050);

7. And SVG files should update the old blue colors to the new ones too. Although I'm thinking that this is a lot of work and maybe could be moved into its own issue, and then even discuss if we can move some of them to use more currentColor. Any thoughts? Just discussed with @lauriii in Slack and he mentioned to address it here.

• core/themes/claro/images/src/hamburger-menu.svg, change #0048dc to #003ECC
• core/themes/claro/images/src/sort--asc.svg, change #004adc to #003ECC
• core/themes/claro/images/src/sort--desc.svg, change #004adc to #003ECC
• All icons inside core/themes/claro/images/icons/004adc should change #004adc to #003ECC, the folder name should be updated and have any reference to them changed.
• All icons inside core/themes/claro/images/icons/00309E should change #00309E to #002E9A, the folder name should be updated and have any reference to them changed.
• All icons inside core/themes/claro/images/icons/222330 should change #222330 to #000F33, the folder name should be updated and have any reference to them changed.

Out of scope:
- Quick Edit styles are using Seven styles, so Seven' blue colors for the button. But 1. Quick Edit is leaving core in D10 and theming a while button is out of scope for this issue. It should be done in #3025911: Quick Edit Style Update.
- Install Page: it is being addressed in #3085219: Installer is not very usable in Claro.
- CKEditor styles in core/themes/claro/css/theme/ckeditor-dialog.pcss.csshave several Seven button-related styles in there, but we shouldn't invest the time on changing it since CKEditor 5 will replace CKEditor 4 in D10.

Removing the Stable blocker tag.

Also, the patch is not applying anymore, sorry! And it would be great to add a D10 patch because the code is realy different and both will be needed for the commit. Thanks!!

Committed 34915ec and pushed to 10.0.x, 9.5.x and 9.4.x. Thanks all, it is awesome to get this done!