Olivero: Rename and consolidate all color CSS variable names.

Child of #3217923: [Plan] Organize and refactor CSS color variables for Olivero

Problem

Olivero's colors naming is all over the place.

• Primary colors are namespaced --blue. We will switch this to --primary
• There are duplicate or extremely similar colors in both the primary and gray palettes. We will consolidate these.
• The number at the end of the colors does not always indicate its luminosity. We will change this value to reflect its luminosity (round it up to the nearest 5th)

For example, --color--blue-20 will correspond to hsl(202, 79%, 38%). This means that its updated variable name can be something like --color--primary-40.

Plan

I worked with Olivero designer @jwitkowski79 to create this plan to rename and consolidate the colors:

Primary colors:

--color--blue-10 (luminosity 32%) 👉 --color--primary-30
--color--blue-20 (luminosity 38%) 👉 --color--primary-40
--color--blue-30 (luminosity 50%) 👉 --color--primary-50 (deleting this - duplicate color variable)
--color--blue-50 (luminosity 50%) 👉 --color--primary-50
--color--blue-70 (luminosity 62%) 👉 --color--primary-60
--color--blue-90 (luminosity 93%) 👉 not used (remove it)

Grays

--color--gray-0 (luminosity 6%) 👉 --color--gray-5 (this will be consolidated to --color--gray-5)
--color--gray-5 (luminosity 5%) 👉 --color--gray-5 (no change)
--color--gray-8 (luminosity 11%) 👉 --color--gray-10 
--color--gray-10 (luminosity 20%) 👉 --color--gray-20 
--color--gray-20 (luminosity 44%) 👉 --color--gray-45 (deleting this and consolidating to --color--gray-45)
--color--gray-25 (luminosity 44%) 👉 --color--gray-45
--color--gray-28 (luminosity 55%) 👉 --color--gray-60 (deleting this and consolidating to --color--gray-60)
--color--gray-30 (luminosity 57%) 👉 --color--gray-60
--color--gray-40 (luminosity 66%) 👉 --color--gray-65 (deleting this and consolidating to --color--gray-65)
--color--gray-45 (luminosity 72%) 👉 --color--gray-70
--color--gray-50 (luminosity 63%) 👉 --color--gray-65
--color--gray-70 (luminosity 88%) 👉 --color--gray-90
--color--gray-75 (luminosity 89%) 👉 --color--gray-90 (deleting this and consolidating to --color--gray-90)
--color--gray-80 (luminosity 93%) 👉 --color--gray-95
--color--gray-90 (luminosity 96%) 👉 --color--gray-100 (deleting this and consolidating to --color--gray-100)
--color--gray-95 (luminosity 97%) 👉 --color--gray-100

Testing instructions

There should be no visual changes with this patch. Basically, you'll need to look through the site and make sure that nothing has changed :)

You can find Tugboat previews to compare at:

• Drupal 10 HEAD
• Drupal 10 with this patch applied